42

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

4

1 回答 1

91

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

图像方法的缺点是：

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

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

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

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

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

您可以在此处查看对图标的字体方法可以做什么。

所以在 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 使用一个单独的图标类，它引用Glyphicon Halflings 字体中的Unicode 引用，例如：

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

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

<span class="glyphicon glyphicon-envelope"></span>
于 2013-11-30T23:11:34.877 回答