我知道图标字体只是字体,您可以通过调用它们的类名来获得图标,但是图标字体如何工作?
我已经尝试检查Chrome中加载的相关图标字体资源,以查看图标字体如何显示图标(与常规字体相比),但是我无法弄清楚这种情况如何发生。
即使有大量的图标字体可用,我也没有找到有关如何完成“图标字体技术”的资源。也有大量资源显示如何集成图标字体 ,但是似乎没有人分享或写出如何完成此工作!
Answers:
Glyphicons的图像和没有的字体。所有图标都可以在sprite图像(也可以作为单个图像)中找到,并将它们作为backround-image
s添加到元素中:
实际的字体图标(例如FontAwesome)确实涉及下载特定字体并利用该content
属性,例如:
@font-face {
...
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
...
}
.icon-beer:before {
content: "\f0fc";
}
由于旧版浏览器不支持该content
属性,因此它们也使用了images。
这是一个完全原始的FontAwesome用作字体的示例,将
(-您可能看不到它!)变成一辆救护车:http : //jsfiddle.net/GWqcF/2

变成救护车的示例
如果您的问题是CSS类如何插入特定字符(将以特殊字体显示为图标),请查看FontAwesome的源代码:
.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }
因此,使用CSS内容指令来插入字符(该字符来自Unicode的专用保留区域,不会干扰其他读者)。
f
不是它的一部分,它只是十六进制数15反斜杠开始的十六进制代码点的转义序列。\f004
在CSS中就像
在HTML中一样。
webfont图标如何工作?
Web字体图标通过使用CSS使用content属性将特定字形注入HTML来工作。然后,它@font-face
用于加载样式dingbat的dingbat网络字体。结果是注入的字形成为所需的图标。
首先,您需要一个带有所需图标的网络字体文件,该图标既可以为特定ASCII
字符定义,也可以(A, B, C, !, @, #, etc.)
在Unicode字体的“专用区域”中定义,这些是字体中的空格,不会被Unicode编码的字体。
了解更多,如何在以下位置创建webfont图标 响应式Webfont图标webfont图标。