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

我明白图标字体只是字体，你可以得到的图标只是呼叫他们的类名，但 如何做图标字体的工作？

我试过检查 Chrome 中相关的图标字体资源，看看图标字体是如何显示图标的(与一般字体相比) ，但我还不能弄清楚这是如何发生的。

尽管有大量的 < strong > 图标字体可用 ，我还是没能找到关于如何实现这种“图标字体技术”的资源。还有大量的资源显示图标字体如何可以是 整合，但似乎没有人分享或写关于 如何这是完成了！

47257 次浏览
小开
最佳答案

Glyphicons are images and not a font. All the icons are found within a sprite image (also available as individual images) and they are added to the elements as positioned backround-images:

Glyphicons

Actual font icons (FontAwesome, for instance) do involve downloading a specific font and make use of the content property, for instance:

@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";
}

As the content property isn't supported in older browsers, these also make use of images.

Here's an example of completely raw FontAwesome in use as a font, turning &#xf0f9; ( - you may not be able to see this!) into an ambulance: http://jsfiddle.net/GWqcF/2

小开

If your question is how a CSS class can insert a specific character (that will be rendered as an icon in the special font), take a look at the 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"; }

So a CSS content directive is used to insert the character (which is from a special private-use reserved area of Unicode that does not mess up other readers).

小开

How webfont icons work?

Web-fonts icons work by using CSS to inject a specific glyph into the HTML using the content property. It then uses @font-face to load a dingbat webfont that styles the injected glyph. The upshot is that that injected glyph becomes the desired icon.

To begin, you’ll need a web-font file with the icons you need, either defined for particular ASCII characters (A, B, C, !, @, #, etc.) or in the Private Use Area of the Unicode font, which are spaces in the font that will not be used by specific characters in a Unicode encoded font.

Read more, how to create webfont icon at Responsive Webfont Icons.

小开

The most popular answer says that Font Awesome uses images. From what I understood, it does not use images in the normal case.

Let's do some experiments to dive into details.

I used the following minimal code to test Font Awesome. You can try it yourself. Copy-paste it into a static HTML file and open the file in a browser.

<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>

As you can see, I have used a Font Awesome desktop icon with style applied on top of it using the simple style="" attribute. Here is the result..

enter image description here

It responds to everything that a font can respond to. It responds to color, It responds to italics, and it responds to font size.

So to me, it does not look like a static image. Maybe it is SVG? Open Chrome network tab and refresh to load the static HTML file again. I see only these calls:

enter image description here

There is one font file: fa-solid-900.woff2 (web open font format). Download this file just for the experiment and put it within the same folder as our experimental HTML file, we will refer to it in next experiment.

Let's create a new HTML file without refering to Font Awesome CSS and just using the font file:

<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>

Result is the same:

enter image description here

I do not understand the full details of font creation yet. However, this is a high-level understanding. For each font icon class Font Awesome has specified a special font shape which it accesses by using a special character sequence. For desktop icon it is \f108

Font Awesome uses CSS classes with the selector :before for linking each font shape with a class name. Like the following...

.my-custom-desktop-icon:before
{
font-weight: 900;
font-family: "Font Awesome 5 Free";
content: "\f108";
}

If we look at the Font Awesome CSS file there are references to many other src for a font but I think the browser loads the first compatible file only. So for most browsers, image files are not required.


提交答案