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

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

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

即使有大量的图标字体可用，我也没有找到有关如何完成“图标字体技术”的资源。也有大量资源显示如何集成图标字体，但是似乎没有人分享或写出如何完成此工作！

— 维维克·钱德拉（Vivek Chandra）
source

Answers:

Glyphicons的图像和没有的字体。所有图标都可以在sprite图像（也可以作为单个图像）中找到，并将它们作为backround-images添加到元素中：

雕ly

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

— 詹姆斯·唐纳利
source

FontAwesome图标是字体。我什至在回答中提到了FontAwesome，然后继续说说它们如何处理不支持将CSS添加到页面的CSS方法的浏览器。

— James Donnelly 2013年

图标是字体的字符。举一个粗略的例子：字母“ Z”可以设计成看起来像手提箱，可以另存为字体，然后在网站上使用。

— James Donnelly 2013年

这是一个使用完全原始的FontAwesome并将其变成救护车的示例

— James Donnelly

@VivekChandra是的，是的！:-)图标字体与其他任何字体一样，只是字符的样式看起来像图标。FontAwesome使用保留给“私人使用”的一系列字符。

— James Donnelly 2013年

太棒了感谢所有资源-将会深入研究，现在情况变得更加清晰。

— Vivek Chandra

如果您的问题是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的专用保留区域，不会干扰其他读者）。

— 提洛
source

斜杠f是什么意思？

— CodyBugstein

该f不是它的一部分，它只是十六进制数15反斜杠开始的十六进制代码点的转义序列。\f004在CSS中就像在HTML中一样。

— Thilo

webfont图标如何工作？

Web字体图标通过使用CSS使用content属性将特定字形注入HTML来工作。然后，它@font-face用于加载样式dingbat的dingbat网络字体。结果是注入的字形成为所需的图标。

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

了解更多，如何在以下位置创建webfont图标响应式Webfont图标webfont图标。

— artamonovdev
source