css – 图标字体：它们如何工作？

我理解图标字体只是字体，你可以通过调用他们的类名称，但如何图标字体工作得到图标？

我试过检查在Chrome中加载的相关图标字体资源，以查看图标字体如何显示图标(与一般字体相比)，但我还没有能够弄清楚这是如何发生的。

我也没有成功找到资源，如何做这个“图标字体技术”，即使有负载的icon fonts available.还有一些资源显示图标字体如何可能是integrated，但没有人似乎是共享或写关于这是怎么做的！

解决方法

Glyphicons是 images而不是字体。所有图标都在sprite图像(也可以作为单独的图像)中找到，并且它们被添加到定位的背景图像元素：

实际字体图标(例如FontAwesome)涉及下载特定字体并利用内容属性，例如：

@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";
}

作为内容属性isn’t supported在旧版的浏览器，这些也利用images。

这里有一个完全原始的FontAwesome用作字体，翻转&#xf0f9的例子; ( – 你可能不能看到这个！)到救护车：http://jsfiddle.net/GWqcF/2

原文地址：https://www.jb51.cc/css/222113.html