css - How do ligature icons work in Material Icons?

Question

Using Material Icons, a plus icon can be added as follows:

<i class="material-icons">add</i>  

The text add is no longer visible. Why does this happen and where does the plus icon come from? I know it's defined in the font file, but how?

If it's due to the word add linked with the plus icon in the font file, then why doesn't the following work in Bootstrap, with its Glyphicons?

<span style="font-family: 'Glyphicons Halflings'">20ac</span>

Answer 1

EXPLANATION

When you strip all the technical information, the answer is really quite straightforward, the font file incorporates a few tables amongst which:

• [MANDATORY] the list of characters
• [MANDATORY] the hexadecimal codes of those characters
• [OPTIONAL] one or more aliases/alternative names for those characters

The one or more aliases/alternative names are the 'ligatures' you are referring to and reside in the font file.

Essentially, when using a character/icon from a font file with ligatures, we have the option to use

• the 'regular' hexadecimal code: <i class="some-font-with-ligatures">&#xxxx;</i>
• or the alternative/alias/ligature name: <i class="some-font-with-ligatures">ligature-name or alias</i>

That is probably all the important info for a web designer to know.

---

EXTRAS

Go to CSS-Tricks: How do ligature icons work... to see usage examples and a brief explanation.

And if you want to mess around with your own icon font files I suggest you start using the IcoMoon APP:

• start the APP, select an icon and select 'generate font' (bottom right)
• Enable display of ligatures with the 'show ligatures'-button (top left 3rd button)