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

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

我试着检查Chrome中加载的相关图标字体资源，看看图标字体是如何显示图标的（与普通字体相比），但我还没有弄清楚这是如何发生的

我也没有成功地找到关于“图标字体技术”是如何实现的资源，尽管有很多。也有大量的资源展示了图标字体的功能，但似乎没有人分享或写关于如何做到这一点的文章

是字体，而不是字体。所有图标都位于精灵图像（也可作为单个图像使用）中，它们被添加到元素中，作为定位的

背景图像

s:

实际的字体图标（例如）确实涉及下载特定字体并使用

内容

属性，例如：

@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

属性，它们还利用了

---

下面是一个完全原始字体的示例，它被用作字体，将

和#xf0f9( - 您可能无法在救护车中看到！）：
如果您的问题是CSS类如何插入特定字符（将以特殊字体呈现为图标），请查看：

因此，CSS内容指令用于插入字符（来自Unicode的专用保留区域，不会干扰其他阅读器）。
webfont图标如何工作？

Web字体图标的工作原理是使用CSS，使用content属性向HTML中注入特定的字形。然后，它使用
@font-face
加载一个丁巴特webfont，该webfont为注入的字形设置样式。结果是，注入的图示符成为所需的图标

首先，您需要一个带有所需图标的web字体文件，可以是为特定的
ASCII
字符
（a、B、C、！、@、#等）定义的图标，也可以是Unicode字体的专用区域中的图标，这些图标是Unicode编码字体中特定字符不会使用的字体中的空格

阅读更多有关如何在创建webfont图标的信息。
字体图标是字体。我甚至在我的回答中提到了FontAwesome，并接着说他们如何处理那些不支持CSS方法的浏览器，将图标添加到页面中。图标是字体的字符。作为一个粗略的例子：字母“Z”可以设计成一个手提箱，保存为字体，然后在网站上使用进入救护车：@VivekChandra是的，没错！：-）图标字体与任何其他字体一样，只是字符的样式类似于图标。FontAwesome使用了一系列。我的浏览器只加载小框，其中包含
F0F9
。为什么？斜杠f是什么意思？
f
不是它的一部分，它只是十六进制数15。反斜杠开始十六进制代码点的转义序列\f004
类似于
在HTML中。
.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"; }