bootstrap glyphicons 字体实现方法_html/css_WEB-ITnose

使用bootstrap很久了，内置的 glyphicons 图标，足以满足 小型项目的需求。只需要使用一个样式，即可调出图标。虽然感觉很神奇，一直没有分析他是怎么实现的，通过Chrome 开发者工具，定位到 对应的elment 后，得知他是使用的 CSS 伪元素技术。

.glyphicons 定义了 所有 glyphicons 图标字体的样式

.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-eur:before

.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 字体实现方法
  
    


 http://www.miaoqiyuan.cn/
            

 mqycn2 
            

77068320 1301425789   
            
mqycn2