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

Question

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

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

即使有大量的图标字体可用,我也没有成功找到有关这种"图标字体技术"的资源.还有大量资源显示如何集成图标字体 ,但似乎没有人分享或写下如何完成这些!

Answer 1

Glyphicons是图像而不是字体.所有图标都可以在精灵图像中找到(也可以作为单独的图像使用),并且它们会被添加到定位为backround-images 的元素中:

实际的字体图标(例如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属性,因此这些也可以使用图像.

这是一个完全原始的FontAwesome用作字体的例子,转向( - 你可能无法看到这个!)到一辆救护车:http://jsfiddle.net/GWqcF/2

Answer 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的特殊私有用保留区域,不会弄乱其他读者).

Answer 3

webfont图标如何工作？

Web字体图标通过使用CSS使用content属性将特定字形注入HTML来工作.然后它@font-face用于加载一个dingbat webfont,用于对注入的字形进行样式设置.结果是注入的字形成为所需的图标.

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

阅读更多内容,如何在Responsive Webfont Icons中创建webfont图标.