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

Question

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

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

即使有icon fonts available的负载，我也没有成功找到有关这种“图标字体技术”的资源。还有大量资源显示图标字体的格式integrated，但似乎没有人分享或撰写关于 这样做的事情！

Answer 1

Glyphicons为images而不是字体。所有图标都在精灵图像中找到（也可作为单独的图像使用），并且它们被添加到定位backround-image的元素中：

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

Answer 2

如果您的问题是CSS类如何插入特定字符（将以特殊字体呈现为图标），请查看source for 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来工作。然后使用template< typename I > class T { protected: virtual ~ T() = default; something_essential() { #ifndef NDEBUG static auto const & derived_type = typeid( * this ); assert ( derived_type == typeid( * this ) && "Illegal inheritance from T." ); #endif // Do actual essential work. } }; 加载一个dingbat webfont，用于对注入的字形进行样式设置。结果是注入的字形成为理想的图标。

首先，您需要一个带有您需要的图标的网络字体文件，或者为特定的@font-face字符ASCII或Unicode字体的专用区域定义，这些是空格在Unicode编码字体中的特定字符不会使用的字体。

了解详情，如何在Responsive Webfont Icons创建webfont图标。