不看后悔（bootstrap的icon图标）bootstrap-icons，Bootstrap教程:icon图标调用及使用方法，Bootstrap教程:icon图标调用及使用方法，
icon图标是我们在Web制作中常看到的小icon图标，可以说这些小icon图标是一个优秀Web中不可缺少的一部分，起到画龙点睛的效果。在Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。Bootstrap框架中图标基本都来源于都是glyphicons这个网站提供的，并且免费授权给Bootstrap框架使用，所以大家可以放心使用在自己的项目当中。
Bootstrap框架将内部样式也提取出来： 1、LESS版本：对应源文件为glyphicons.less文件 2、Sass版本：对应源文件为_glyphicons.scss文件
Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体。
字体我去哪里获取。如果你是从前面一直阅读过来，我们在介绍文件结构那一节就已介绍过。在Bootstrap框架中有一个fonts的目录，这个目录中提供的字体文件就是用于制作icon的字体文件。 自定义完字体之后，需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码：
.glyphicon{position: relative;top:1px;display:inline-block;font-family:Glyphicons Halflings;font-style: normal;font-weight: normal;line-height:1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.glyphicon-asterisk:before{content:"\2a";}….
(window.slotbydup = window.slotbydup || []).push({
id: "u6835052",
container: "_96bek913mdb",
async: true
});
本文链接：http://blog.sauo.top/?id=470 感谢分享!
