Question

我知道CSS和HTML的一些基础知识，有时也可以使用它们，但我不是专业人士，而且我很好奇Bootstrap Glyphicons是如何工作的。我的意思是Bootstrap zip文件中没有图像，所以图像来自哪里？

Answer 1

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

图像方法的缺点是：

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

因此，在Bootstrap 2.x中使用Font-awesome而不是Glyphicons，因为这使用了没有这种限制的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;
  ...
}

然后每个glyphicon使用一个单独的图标类，引用Glyphicon Halflings字体中的Unicode reference，例如：

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

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

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

Bootstrap Glyphicons如何工作？

1 个答案: