详解Bootstrap glyphicons字体图标
先给大家说下什么是字体图标？
字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
为了表示对图标作者的感谢，希望您在使用时加上 GLYPHICONS 网站的链接。
使用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实现：在元素之后添加内容）。
明白了原理，代码就简单了，具体代码如下所示：
DEMO of miaoqiyuan.cn 测试页面，说明清参考： ;/li>
关于小编给大家介绍的BootStrap glyphicons 字体图标实现方法到此就结束了，如果大家有任何问题欢迎给我留言，小编会及时回复大家的!
