Icon-fonts: ligatures in fonts vs font-classes

user_3862511 0
Viewed 61

It's a trend using font-ligatures in icon fonts. The icon names are stored in the font files as ligatures.

The advantage is: You don't need to create css classes for each icon, and the html code is shorter.

So you can write

<i class="icon">arrow-left</i>

instead of

<i class="fa fa-arrow-left"></i>

Which version of both has the better browser performance? (in the 1st example, the CSS file does not contain the additional classes, in the 2nd example, the font does not have any ligatures).

Probably a better performance than both would have this:

<i class="icon">&#61023;</i>

no icon classes + no ligatures, but then the char codes must not change when more icons are added to the font, and you have to know all char codes. You also could insert the char directly, but the editors probably will not display it.

ligature icons fonts css html
1 Answers

First what I really dont like is how the "i" tag is used as a short for icon somehow, its used for idiomatic texts.

My prefered way:

<span class="icon">icon-ligature</span>

It definetly shortens the css you have to include as you would normaly have a class for each icon.

For performance reason I wouldnt change the approach, but from a font maintainer perspective if you need an additional font icon, you simply add it to the font with the right ligature and you would be done, with the class approach you need to add a class to unicode mapping in css + patch the font.

user_43320690
Related