bootstrap glyphicons 字体实现方法

2017/02/24更新,感谢猪圈圈(bruce_zxy#163.com)指出,glyphicon 多了个s的问题,文章已经修正
================
使用bootstrap很久了,内置的 glyphicon 图标,足以满足 小型项目的需求。只需要使用一个样式,即可调出图标。虽然感觉很神奇,一直没有分析他是怎么实现的,通过Chrome 开发者工具,定位到 对应的elment 后,得知他是使用的 CSS 伪元素技术。

<span class="glyphicon glyphicon-eur"></span>

.glyphicon 定义了 所有 glyphicons 图标字体的样式
bootstrap-glyphicons-content

.glyphicon{
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing:
}

显示的内容由另一个 类定义的子类定义,比如:glyphicon-eur:before
bootstrap-glyphicons-style

.glyphicon-eur:before, .glyphicon-euro:before{
    content: "\20ac";
}

查阅文档,发现除了:before(CSS2实现:在元素之前添加内容),还有:first-letter(CSS1实现,向文本的第一个字母添加特殊样式,display设置为block时有效)、:first-line(CSS1实现,向文本的首行添加特殊样式,display设置为block时有效)、:after(CSS2实现:在元素之后添加内容)。

明白了原理,代码就简单了。写的例子如下(演示地址:http://www.miaoqiyuan.cn/products/bootstrap-glyphicons/):bootstrap-glyphicons-demo


<!doctype html>
<head lang="zh-CN">
<head>
<meta charset="GB2312">
<title>DEMO of miaoqiyuan.cn</title>
<style type="text/css">
body{background:#CCC;font-family:'Microsoft Yahei';}
.container{background:#FFF;width:800px;margin:50px auto;border:solid 1px #0096D7;border-radius:10px;}
.container h2{font-size:16px;font-width:200;color:#FFF;background:#0096D7;margin:0;padding:5px 15px;}
.container h2 a{color:#FFF;}
.container ul{list-style:none;padding:0;margin:0;}

ul.me{padding:5px;}
ul.me li{margin:5px 10px;background:#EEE;height:40px;line-height:40px;text-indent:5px;border:solid 1px #DDD;border-radius:10px;}

.font-icon:before,.font-icon:after{font-family:'Impact';font-size:16px;color:#0096D7;padding:4px 6px;background:#CDF;border:solid 1px #0096D7;border-radius:10px;margin-right:5px;}
/* 伪元素对 元素样式没有影响 */
.font-icon{color:#090;font-family:'Airal';}
.web:before{content:'Home';}
.qq:before{content:'QQ';}
.wechat:before{content:'WeChat';color:#090;border-color:#090;background:#99F760;}
.chat:before{color:#C00;}
h2:first-letter{font-size:20px;color:#C00;}
.chat:after{content:'ChatMe!';background:#FDC;color:#D76900;border-color:#D76900;margin-left:5px;}
</style>
</head>
<body>
<div class="container">
  <h2>测试页面,说明清参考:<a href="http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-how-to-achieve/">bootstrap glyphicons 字体实现方法</a></h2>
  <div>
    <ul class="me">
      <!-- glyphicon 方式 -->
      <li><span class="font-icon web"></span> http://www.miaoqiyuan.cn/</li>
      <!-- 放入内部的效果 -->
      <li><span class="font-icon wechat"></span> mqycn2 </li>
      <!-- glyphicon 方式 前后放置 -->
      <li><span class="font-icon qq">77068320 1301425789  </span> <span class="font-icon chat"></span></li>
      <!-- 放入内部的效果,样式叠加,和普通样式一样,后设置的也会把前设置的覆盖掉 -->
      <li><span class="font-icon wechat chat">mqycn2</span></li>
    </ul>
  </div>
</div>
</body>
</html>

bootstrap glyphicons 字体实现方法》上有2条评论

  1. 猪圈圈

    代码块
    .glyphicons {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: ‘Glyphicons Halflings’;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing:
    }
    中类名应该是glyphicon 才对,多了一个s

发表评论

电子邮件地址不会被公开。 必填项已用*标注