twitter-bootstrap - Bootstrap Glyphicons 是如何工作的？

Question

我了解 CSS 和 HTML 的一些基础知识，有时会使用它们，但我不是专业人士，我很好奇 Bootstrap Glyphicons 的工作原理。我的意思是 Bootstrap zip 文件中没有图像，那么图像来自哪里？

Answer 1

在 Bootstrap 2.x 中，Glyphicons 使用图像方法 - 正如您在问题中提到的那样使用图像。

图像方法的缺点是:

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

因此，很多人使用 Font-awesome 代替 Bootstrap 2.x 中的字形图标，因为它使用的 SVG 图标没有这样的限制。

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

使用字体来表示图标比使用图像具有优势:

• 可扩展 - 无论客户端设备的分辨率如何，都能很好地工作
• 可以用CSS改变颜色
• 可以执行传统图标可以执行的所有操作(例如更改不透明度、旋转等)
• 可以添加描边、渐变、阴影等。
• 转换为文本(带连字)
• 连字由屏幕阅读器读取
• 将图标更改为字体就像更改 CSS 中的字体系列一样简单

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

因此在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;
  ...
}

然后每个字形使用一个单独的图标类，它引用 Unicode reference在 Glyphicon Halflings 字体内，例如:

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

这就是为什么您必须针对 Bootstrap 3 中的 span 元素使用基本 .glyphicon 类以及单独的图标类:

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