图标字体：它们是如何工作的？

Question

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

我尝试检查 Chrome 中加载的相关图标字体资源，以查看图标字体如何显示图标（与一般字体相比），但我无法弄清楚这是如何发生的。

即使有大量可用的 图标字体，我也未能找到有关如何完成这种“图标字体技术”的资源。还有大量资源展示了如何 集成 图标字体，但似乎没有人分享或写下这是 如何 完成的！

原文由 Vivek Chandra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

字形 图标 是 图像 而 不是 字体。所有图标都在一个精灵图像中找到（也可作为单独的图像使用），并且它们被添加到定位为 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

原文由 James Donnelly 发布，翻译遵循 CC BY-SA 3.0 许可协议