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
.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 的特殊私有保留区域,不会干扰其他读者)。
f
并不是它的一部分,它只是十六进制数15。反斜杠开始十六进制码点的转义序列。在CSS中,\f004
就像在HTML中的
。 - ThiloWebfont图标是如何工作的?
Webfont图标通过使用CSS将特定的字形注入到HTML中,并使用content属性。然后,它使用@font-face
来加载一个dingbat webfont,对注入的字形进行样式设置。结果是该注入的字形变成了所需的图标。
首先,您需要具有所需图标的Webfont文件,可以针对特定的ASCII字符(A、B、C、!、@、#等)定义,也可以在Unicode字体的专用使用区中定义,这些是字体中不会被特定字符使用的空格。
阅读更多内容,请访问响应式Webfont图标。
<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