Reputation: 4358

Icon Fonts: How do they get rendered by web pages?

I understand that icon fonts are just fonts and that you can get the icons by just calling their classname, but how do icon fonts work?

I've tried checking the related icon font resources loaded in Chrome to see how icon fonts display icons (in comparison to general fonts) but I haven't been able to figure out how this happens.

I've also been unsuccessful in finding resources on how this "icon font technique" is done, even though there are loads of icon fonts available. There are also loads of resources showing how icon fonts can be integrated, but no one seems to be sharing or writing about how this is done!

Upvotes: 104

Answers (4)

Sandeep Dixit

Reputation: 1046

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

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:

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:

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.

Upvotes: 1

artamonovdev

Reputation: 2380

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.

Upvotes: 13

Thilo

Reputation: 262814

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

Upvotes: 27

James Donnelly

Reputation: 128796

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  ( - you may not be able to see this!) into an ambulance: http://jsfiddle.net/GWqcF/2

Upvotes: 61

Icon Fonts: How do they get rendered by web pages?

Answers (4)

Related Questions