Bootstrap Glyphicons如何工作？

Question

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

Answer 1

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

图像方法的缺点是:

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

因此,在Bootstrap 2.x中使用Font-awesome而不是glyphicons,因为这使用了没有这种限制的SVG图标.

在Bootstrap 3.x中,Glyphicons使用font方法.

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

• 可扩展 - 无论客户端设备的分辨率如何,都能很好地工作
• 可以用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";
}

这就是为什么你必须.glyphicon对spanBootstrap 3 中的元素使用基类和单独的图标类:

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