在 Bootstrap 2.x 中,Glyphicons 使用图像方法 - 正如您在问题中提到的那样使用图像。
图像方法的缺点是:
- 您无法更改图标的颜色
- 您无法更改图标的背景颜色
- 您无法增加图标的大小
因此,很多人使用 Font-awesome 代替 Bootstrap 2.x 中的字形图标,因为它使用的 SVG 图标没有这样的限制。
在Bootstrap 3.x中,Glyphicons使用字体方法。
使用字体来表示图标比使用图像具有优势:
- 可扩展 - 无论客户端设备的分辨率如何,都能很好地工作
- 可以用CSS改变颜色
- 可以做传统图标可以做的一切(例如改变不透明度、旋转等)
- 可以添加描边、渐变、阴影等。
- 转换为文本(带连字)
- 连字由屏幕阅读器读取
- 将图标更改为字体就像更改 CSS 中的字体系列一样简单
你可以看看用图标的字体方法可以做什么here http://css-tricks.com/examples/IconFont/.
所以在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;
...
}
然后每个字形使用一个单独的图标类,它引用一个统一码参考 http://en.wikipedia.org/wiki/Unicode_font在 Glyphicon Halflings 字体内,例如:
.glyphicon-envelope:before {
content: "\2709";
}
这就是为什么你必须使用底座.glyphicon
类以及单独的图标类span
Bootstrap 3 中的元素:
<span class="glyphicon glyphicon-envelope"></span>