Bootstrap中的Glyphicon 字体图标

最新推荐文章于 2023-07-13 21:47:53 发布

dawei5565

最新推荐文章于 2023-07-13 21:47:53 发布

阅读量437

点赞数

原文链接：http://www.cnblogs.com/flywang/p/7016313.html

版权

在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

转载于:https://www.cnblogs.com/flywang/p/7016313.html

dawei5565

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap中的Glyphicon 字体图标

在Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <ti...
复制链接

扫一扫