twitter-bootstrap – Bootstrap Glyphicons如何工作？

图像方法的缺点是：

>您无法更改图标的颜色
>您无法更改图标的背景颜色
>您无法增加图标的大小

所以，在Bootstrap 2.x中，不是字形，很多人使用Font-awesome，因为这使用的SVG图标没有这样的限制。

在Bootstrap 3.x中，Glyphicons使用字体方法。

使用字体表示图标具有优于使用图像的优点：

>可扩展 – 无论客户端设备的分辨率如何，工作得很好
>可以改变CSS的颜色
>可以做一切传统的图标(例如改变不透明度，旋转等)
>可以添加笔画，渐变，阴影等。
>转换为文本(使用连字)
>屏幕阅读器读取连字
>将图标更改为字体就像在CSS中更改font-family一样简单

你可以看到你可以用图标here的字体方法做什么。

所以在Bootstrap分发中，可以看到glyphicon字体文件：

fontsglyphicons-halflings-regular.eot
fontsglyphicons-halflings-regular.svg
fontsglyphicons-halflings-regular.ttf
fontsglyphicons-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使用一个单独的图标类，引用Glyphicon Halflings字体中的Unicode reference，例如：

.glyphicon-envelope:before {
  content: "2709";
}

这就是为什么你必须在Bootstrap 3中使用基本.glyphicon类以及单个图标类与span元素：

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