Bootstrap Glyphicons如何工作?

我知道CSS和HTML的一些基础知识,有时也可以使用它们,但是我不是专业人士,并且我对Bootstrap Glyphicons的工作方式感到好奇。 我的意思是Bootstrap zip文件中没有图像,所以图像来自何处?

adamsmith asked 2020-08-10T00:57:44Z
1个解决方案
90 votes

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

image方法的缺点是:

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

因此,许多人使用了Font-awesome,而不是Bootstrap 2.x中的字形图标,因为它使用了没有这种限制的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基类链接到该字体(请注意span):

.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中的span元素使用基类.glyphicon和单个图标类的原因

<span class="glyphicon glyphicon-envelope"></span>
mccannf answered 2020-08-10T00:59:18Z
translate from https://stackoverflow.com:/questions/20279512/how-do-bootstrap-glyphicons-work