Glyphicons是图片，而不是字体。所有图标都在一个精灵图像中（也可作为单独的图像使用），它们被添加到元素中作为定位的background-image：
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 属性，因此这些内容也使用了图片。
以下是完全原始的FontAwesome字体的示例，将（-您可能无法看到此字符！）转换为救护车：http://jsfiddle.net/GWqcF/2
15
.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 content 指令用于插入字符（该字符来自 Unicode 的特殊私有保留区域，不会干扰其他读者）。
2
f并不是它的一部分，它只是十六进制数15。反斜杠开始十六进制码点的转义序列。在CSS中，\f004就像在HTML中的。 - ThiloWebfont图标是如何工作的？
Webfont图标通过使用CSS将特定的字形注入到HTML中，并使用content属性。然后，它使用@font-face来加载一个dingbat webfont，对注入的字形进行样式设置。结果是该注入的字形变成了所需的图标。
首先，您需要具有所需图标的Webfont文件，可以针对特定的ASCII字符（A、B、C、！、@、#等）定义，也可以在Unicode字体的专用使用区中定义，这些是字体中不会被特定字符使用的空格。
阅读更多内容，请访问响应式Webfont图标。
让我们进行一些实验来深入了解。
我使用以下最小代码测试Font Awesome。 您可以自己尝试。将其复制粘贴到静态HTML文件中，并在浏览器中打开该文件。
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
</head>
<body>
<i class="fas fa-desktop" ></i>
<i class="fas fa-desktop" style="color:red"></i>
<i class="fas fa-desktop" style="color:blue;font-style:italic"></i>
<i class="fas fa-desktop" style="color:green;font-style:italic;font-size:40px"></i>
</body>
</html>
如您所见，我使用了一个Font Awesome桌面图标，并在其上方应用了样式，使用简单的style=""属性。
这是结果...
它可以响应字体可以响应的一切。它可以响应颜色，响应斜体，响应字体大小。
所以对我来说，它看起来不像是静态图片。也许是SVG？打开Chrome网络选项卡并刷新以再次加载静态HTML文件。我只看到这些调用：
有一个字体文件：fa-solid-900.woff2 (Web开放字体格式)。仅为实验下载此文件并将其放在与我们的实验HTML文件相同的文件夹中，我们将在下一个实验中引用它。
让我们创建一个新的HTML文件，不引用Font Awesome CSS，只使用字体文件：
<html lang="en">
<head>
<style>
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: block;
src: url(fa-solid-900.woff2)
}
.my-custom-desktop-icon:before
{
font-weight: 900;
font-family: "Font Awesome 5 Free";
content: "\f108";
}
</style>
</head>
<body>
Custom Icon classes
<span class="my-custom-desktop-icon" ></span>
<i class="my-custom-desktop-icon" style="color:red"></i>
<i class="my-custom-desktop-icon" style="color:blue;font-style:italic"></i>
<i class="my-custom-desktop-icon" style="color:green;font-style:italic;font-size:40px"></i>
</body>
</html>
结果相同：
我还不完全了解字体创建的所有细节。然而，这是一个高层次的理解。对于每个字体图标类，Font Awesome都指定了一个特殊的字体形状，它通过使用特殊的字符序列来访问。对于桌面图标，它是 \f108。
Font Awesome使用带有选择器:before的CSS类将每个字体形状与类名链接在一起。如下所示...
.my-custom-desktop-icon:before
{
font-weight: 900;
font-family: "Font Awesome 5 Free";
content: "\f108";
}
如果我们查看Font Awesome CSS文件，会发现它引用了许多字体的src，但我认为浏览器只会加载第一个兼容的文件。因此，对于大多数浏览器来说，不需要图像文件。
原文链接
F0F9的小方块。为什么？ - Black