Bootstrap Glyphicons如何工作？
我知道一些CSS和HTML的基础知识，有时候和他们一起工作，但我不是一个专业人员，而且我很好奇Bootstrap Glyphicons是如何工作的。 我的意思是在Bootstrap压缩文件中没有图像，所以图像从哪里来？
在Bootstrap 2.x中，Glyphicons使用图像方法 – 使用图像，就像你在问题中提到的那样。
图像方法的缺点是：
- 您无法更改图标的颜色
- 您无法更改图标的背景颜色
- 你不能增加图标的大小
因此，Bootstrap 2.x中的字形代替了很多人使用的Font-awesome，因为这个SVG图标没有这个限制。
在Bootstrap 3.x中，字形使用字体方法。
使用字体来表示图标比使用图像有优势：
- 可扩展 – 无论客户端设备的分辨率如何，都能很好地工
- 可以用CSS改变颜色
- 可以做一切传统的图标可以（例如改变不透明度，旋转等）
- 可以添加笔触，渐变，阴影等
- 转换为文本（带连字符）
- 屏幕阅读器读取连字
- 将图标更改为字体与更改CSS中的font-family一样简单
你可以在这里看到你可以用图标的字体方法做什么。
因此，在Bootstrap发行版中，您可以看到glyphicon字体文件：
fonts\glyphicons-halflings-regular.eot fonts\glyphicons-halflings-regular.svg fonts\glyphicons-halflings-regular.ttf fonts\glyphicons-halflings-regular.woff Bootstrap CSS引用了glyphicon字体，如下所示：
@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }
并且CSS使用.glyphicon基类（注意font-family ）链接到这个字体：
.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; ... }
然后，每个图标使用一个单独的图标类，它是指Glyphicon Halflings字体内的Unicode引用 ，例如：
.glyphicon-envelope:before { content: "\2709"; }
这就是为什么你必须在Bootstrap 3中使用base .glyphicon类以及单个图标类对span元素：
<span class="glyphicon glyphicon-envelope"></span>
