css - 图标字体 : How do they work?

Question

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

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

我也未能成功找到有关如何完成此“图标字体技术”的资源，即使有负载 icon fonts available .还有大量资源显示图标字体可以如何 integrated ，但似乎没有人分享或撰写如何这是如何完成的!

Answer 1

Glyphicons是images而且不是一种字体。所有图标都可以在 sprite 图像中找到(也可以作为单独的图像使用)，并将它们添加到定位为 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 属性 isn't supported在旧版浏览器中，这些也使用images .

这是一个完全原始的 FontAwesome 用作字体的示例，将 ( - 你可能看不到这个!)变成救护车:http://jsfiddle.net/GWqcF/2