twitter-bootstrap Bootstrap Glyphicons 如何工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20279512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do Bootstrap Glyphicons work?
提问by adamsmith
I know some basics of CSS and HTML and sometimes work with them, but am not a professional, and I'm curious about how Bootstrap Glyphicons work. I mean there are no images in the Bootstrap zip file, so where do the images come from?
我知道一些 CSS 和 HTML 的基础知识，有时会使用它们，但我不是专业人士，我很好奇 Bootstrap Glyphicons 是如何工作的。我的意思是 Bootstrap zip 文件中没有图像，那么图像来自哪里？
回答by mccannf
In Bootstrap 2.x, Glyphicons used the image method - using images as you mentioned in your question.
在 Bootstrap 2.x 中，Glyphicons 使用了图像方法 - 使用您在问题中提到的图像。
The drawbacks with the image method was that:
图像方法的缺点是：
- You couldn't change the color of the icons
- You couldn't change the background-color of the icons
- You couldn't increase the size of the icons
- 您无法更改图标的颜色
- 您无法更改图标的背景颜色
- 您无法增加图标的大小
So instead of glyphicons in Bootstrap 2.x, a lot of people used Font-awesome, as this used SVG icons which did not have such limitations.
所以很多人没有使用 Bootstrap 2.x 中的字形，而是使用 Font-awesome，因为它使用了没有这些限制的 SVG 图标。
In Bootstrap 3.x, Glyphicons use the font method.
在 Bootstrap 3.x 中，Glyphicons 使用字体方法。
Using a font to represent an icon has advantages over using images:
使用字体来表示图标比使用图像更有优势：
- Scalable - works nicely regardless of client device's resolution
- Can change the colour with CSS
- Can do everything traditional icons can (e.g. change opacity, rotation, etc.)
- Can add strokes, gradients, shadows, and etc.
- Convert to text (with ligatures)
- Ligatures are read by screen readers
- Changing icons to fonts is as simple as changing the font-family in CSS
- 可扩展 - 无论客户端设备的分辨率如何，都能很好地工作
- 可以用 CSS 改变颜色
- 可以做传统图标可以做的一切（例如改变不透明度、旋转等）
- 可以添加笔触、渐变、阴影等。
- 转换为文本（带连字）
- 连字由屏幕阅读器读取
- 将图标更改为字体就像更改 CSS 中的字体系列一样简单
You can see what you can do with the font method for icons here.
您可以在此处查看图标的字体方法可以做什么。
So in the Bootstrap distribution, you can see the glyphicon font files:
所以在 Bootstrap 发行版中，你可以看到 glyphicon 字体文件：
fonts\glyphicons-halflings-regular.eot
fonts\glyphicons-halflings-regular.svg
fonts\glyphicons-halflings-regular.ttf
fonts\glyphicons-halflings-regular.woff
The Bootstrap CSS refers to the glyphicon font like so:
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');
}
And the CSS links to this font using the .glyphiconbase class (note the font-family):
并且使用.glyphicon基类的 CSS 链接到此字体（注意font-family）：
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
...
}
And then each glyphicon uses an individual icon class which refers to a Unicode referencewithin the Glyphicon Halflings font, e.g.:
然后每个 glyphicon 使用一个单独的图标类，它引用Glyphicon Halflings 字体中的Unicode 引用，例如：
.glyphicon-envelope:before {
content: "09";
}
This is why you must use the base .glyphiconclass as well as the individual icon class against the spanelement in Bootstrap 3:
这就是为什么您必须.glyphicon对spanBootstrap 3中的元素使用基类和单个图标类的原因：
<span class="glyphicon glyphicon-envelope"></span>
