图标字体:它们如何工作?


86

我知道图标字体只是字体,您可以通过调用它们的类名来获得图标,但是图标字体如何工作?

我已经尝试检查Chrome中加载的相关图标字体资源,以查看图标字体如何显示图标(与常规字体相比),但是我无法弄清楚这种情况如何发生。

即使有大量的图标字体可用,我也没有找到有关如何完成“图标字体技术”的资源。也有大量资源显示如何集成图标字体 ,但是似乎没有人分享或写出如何完成此工作!

Answers:


53

Glyphicons图像没有的字体。所有图标都可以在sprite图像(也可以作为单个图像)中找到,并将它们作为backround-images添加到元素中:

雕ly

实际的字体图标(例如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


4
FontAwesome图标字体。我什至在回答中提到了FontAwesome,然后继续说说它们如何处理不支持将CSS添加到页面的CSS方法的浏览器。
James Donnelly 2013年

3
图标是字体的字符。举一个粗略的例子:字母“ Z”可以设计成看起来像手提箱,可以另存为字体,然后在网站上使用。
James Donnelly 2013年

1
这是一个使用完全原始的FontAwesome并将其变成救护车的示例
James Donnelly

6
@VivekChandra是的,是的!:-)图标字体与其他任何字体一样,只是字符的样式看起来像图标。FontAwesome使用保留给“私人使用”的一系列字符
James Donnelly 2013年

1
太棒了 感谢所有资源-将会深入研究,现在情况变得更加清晰。
Vivek Chandra

22

如果您的问题是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的专用保留区域,不会干扰其他读者)。


2
斜杠f是什么意思?
CodyBugstein

5
f不是它的一部分,它只是十六进制数15反斜杠开始的十六进制代码点的转义序列。\f004在CSS中就像在HTML中一样。
Thilo

10

webfont图标如何工作?

Web字体图标通过使用CSS使用content属性将特定字形注入HTML来工作。然后,它@font-face用于加载样式dingbat的dingbat网络字体。结果是注入的字形成为所需的图标。

首先,您需要一个带有所需图标的网络字体文件,该图标既可以为特定ASCII字符定义,也可以(A, B, C, !, @, #, etc.)在Unicode字体的“专用区域”中定义,这些是字体中的空格,不会被Unicode编码的字体。

了解更多,如何在以下位置创建webfont图标 响应式Webfont图标webfont图标

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.