Bootstrap Glyphicons 如何工作? [英] How do Bootstrap Glyphicons work?
问题描述
我了解 CSS 和 HTML 的一些基础知识,有时会使用它们,但我不是专业人士,我很好奇 Bootstrap Glyphicons 的工作原理.我的意思是 Bootstrap zip 文件中没有图像,那么图像来自哪里?
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?
推荐答案
在 Bootstrap 2.x 中,Glyphicons 使用了图像方法 - 使用您在问题中提到的图像.
In Bootstrap 2.x, Glyphicons used the image method - using images as you mentioned in your question.
图像方法的缺点是:
- 您无法更改图标的颜色
- 您无法更改图标的背景颜色
- 您无法增加图标的大小
因此,很多人没有使用 Bootstrap 2.x 中的字形,而是使用了 Font-awesome,因为它使用了没有此类限制的 SVG 图标.
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 3.x 中,Glyphicons 使用字体方法.
In Bootstrap 3.x, Glyphicons use the font method.
使用字体来表示图标比使用图像有优势:
Using a font to represent an icon has advantages over using images:
- 可扩展 - 无论客户端设备的分辨率如何,都能很好地工作
- 可以用 CSS 改变颜色
- 可以执行传统图标可以执行的所有操作(例如更改不透明度、旋转等)
- 可以添加笔触、渐变、阴影等.
- 转换为文本(带连字)
- 连字由屏幕阅读器读取
- 将图标更改为字体就像更改 CSS 中的字体系列一样简单
您可以在此处查看使用图标的字体方法可以做什么.
You can see what you can do with the font method for icons here.
所以在 Bootstrap 发行版中,你可以看到 glyphicon 字体文件:
So in the Bootstrap distribution, you can see the glyphicon font files:
fonts\glyphicons-halflings-regular.eot
fonts\glyphicons-halflings-regular.svg
fonts\glyphicons-halflings-regular.ttf
fonts\glyphicons-halflings-regular.woff
Bootstrap CSS 引用 glyphicon 字体,如下所示:
The Bootstrap CSS refers to the glyphicon font like so:
@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
):
And the CSS links to this font using the .glyphicon
base class (note the font-family
):
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
...
}
然后每个 glyphicon 使用一个单独的图标类,它引用 Glyphicon Halflings 字体中的 Unicode 参考,例如:
And then each glyphicon uses an individual icon class which refers to a Unicode reference within the Glyphicon Halflings font, e.g.:
.glyphicon-envelope:before {
content: "\2709";
}
这就是为什么您必须针对 Bootstrap 3 中的 span
元素使用基本的 .glyphicon
类以及单独的图标类:
This is why you must use the base .glyphicon
class as well as the individual icon class against the span
element in Bootstrap 3:
<span class="glyphicon glyphicon-envelope"></span>
这篇关于Bootstrap Glyphicons 如何工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!