zoukankan      html  css  js  c++  java
  • Bootstrap中的Glyphicon 字体图标

    在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

    复制代码
     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <meta charset="utf-8"> 
     5     <title>Bootstrap 实例</title>
     6     <!-- 包含头部信息用于适应不同设备 -->
     7     <meta name="viewport" content="width=device-width, initial-scale=1">
     8     <!-- 包含 bootstrap 样式表 -->
     9     <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    10   </head>
    11 
    12 
    13   <body>
    14     <div class="container">
    15       <h2>图标</h2>
    16       <p>插入图标:</p>      
    17       <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p>      
    18       <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p>            
    19       <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p>
    20       <p>打印图标: <span class="glyphicon glyphicon-print"></span></p>      
    21       <p>下载图标:<span class="glyphicon glyphicon-download"></span></p>      
    22     </div>
    23 
    24   </body>
    25 
    26 </html>
    复制代码

    上面的运行代码如下:

    下面是部分

    参考地址:http://www.bkjia.com/webzh/951332.html

  • 相关阅读:
    DDD领域驱动设计的理解
    设计原则
    毫秒级的时间处理图片
    同步设施
    ASP.NET Core 中文文档
    Jenkins快速搭建持续集成
    刮刮卡
    网页WEB打印控件
    nginx+memcached+ftp上传图片+iis
    通过Jexus 部署 dotnetcore
  • 原文地址:https://www.cnblogs.com/flywang/p/7016313.html
Copyright © 2011-2022 走看看