Glyphicon 字体图标

时间:2024-01-02 13:35:50

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>

上面的运行代码如下:

Glyphicon 字体图标

下面是部分

Glyphicon 字体图标

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