Icon Fonts: How Do They Work

Icon Fonts: How do they work?

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:

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

Correct font-display value for icon fonts

font-display: block;

As you commented, block still has a swap period; so it's still rendered until it's loaded.

Quoting Chris Coyier:

Wanna hear something quite unfortunate? We already mentioned font-display: block;. Wouldn't you think it, uh, well, blocked the rendering of text until the custom font loads? It doesn't. It's still got a swap period. It would be the perfect thing for something like icon fonts where the icon (probably) has no meaning unless the custom font loads. Alas, there is no font-display solution for that.

Considering alternatives:

I've also been there. If you have the chance, you might need to switch to SVG for icons. It has a few advantages over font-icons: SVG is better at pretty much everything than icon fonts.

Even Zach Leatherman, web fonts expert, has opinions about it on his very famous Comprehensive Guide to Font Loading Strategies.

This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice.

What technique used to make css content into icon?

Maybe this will help?

Icon Fonts: How do they work?

Basically, the content code maps to a point in the font. The font is actually an icon. That css is a way to place the icon in the content without actually specifying it in the html content.

Full explanation here: https://webstandardssherpa.com/reviews/responsive-webfont-icons/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffereac5b&utm_medium=google

Reason for icons (icon fonts) always in ::before pseudo-selector

Is there a reason, so many icon-Libraries (Glyhpicon, Font Awesome, Antd icons,…) put their icon in the ::before–pseudo selector?

That method has several advantages ...

• makes it trivial to switch a specific icon for a different character throughout the whole site via CSS

• such icons are mostly used rather as “decoration” than actual content (so this touches on the issue of accessibility as well)

• you can't insert content in an actual element itself, that is reserved for pseudo elements (thanks @Mr Lister for this one)

font icons vs png icons

Good question. I am currently experimenting with Fontello and font icons to see if it's a viable approach.

It's a viable approach. I have used font-based icons in production applications and tested on nearly every popular browser/device (Fontello has examples which even support IE7). I have only good things to say about Fontello, but you can use any tool that you want.

Font icons can scale to any whatever (proportionate) dimensions are desired and work on any pixel density. If you look at your site on a high density display (such as Apple Retina, and increasingly popular on all mobile devices) there is an enormous difference between a raster format (like PNG) and a vector format.

You can define all icons in a single file (like a sprite), but unlike a sprite you don't have to worry about the dimensions of the items within the file. Furthermore, you can scale each item independent of other items in the file.

Considerations

• You will need to manage the font file. These are not human-readable, so you will need to use a tool.
• There are associated CSS selectors to maintain (usually one selector per icon).
• Extra markup is occasionally needed to achieve a particular effect/fix a problem.
• Minor sizing issues; not all icons fill a box uniformly and they are subject to the text rendering idiosyncrasies of each browser.

These considerations are probably less work than using sprites or creating both PNGs/SVGs for every icon.

Keep in mind that a font icon does not contain any color information. However, you can style it as you would any other text. This includes using ARGB colors and applying more advanced CSS effects as pointed out in the comments.

Regarding file size, keep in mind that a browser will almost never download all 4 font formats. Done correctly, usually only one will be downloaded.

An alternative approach is to use SVGs (not SVG fonts) for icons. Browser support for SVGs is less than that of @font-face, so you will need a raster fallback.

Icon Fonts in Shadow DOM

No, there is no “recommended way” to use icon fonts just because those are simply a bundle of css and shadow DOM is intended to hide light css. So your request contradicts the purpose of shadowing.

The common approach is to build the component for showing font-related icons. Every custom component library has in fact it’s own component to show font-icons. Just google for font-awesome polymer or like. A random example.

---

Sidenote: @font-face does not bleed into shadow. It’s the directive setting the relation between fontname and the file where this font to take from, for those fonts which are not known to browser yet. That said, whether you’d try to declare:

@font-face {
    font-family: my-octicons;
    src: url('octicons.otf');
}

and then use it like:

font: normal normal normal 16px/1 my-octicons;

in shadow, it won’t be resolved. The reason it’s resolved in your case is that the browser knows where to take the font to show. In general, it’s the same case as if you were declaring:

font: Helvetica;

without any @font-face in before.

Hope this helps.

how md-icons are rendered on browser

As per the material icon's documentation

It’s easy to incorporate icons into your web page.

<i class="material-icons">face</i> // rendered as face

This example uses a typographic feature called ligatures, which allows
rendering of an icon glyph simply by using its textual name. The
replacement is done automatically by the web browser and provides more
readable code than the equivalent numeric character reference

And here is the detailed answer on stackoverflow

How do ligature icons work in Material Icons?

---

Related Topics