25

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>
Just a student
  • 10,560
  • 2
  • 41
  • 69
user31782
  • 7,087
  • 14
  • 68
  • 143

2 Answers2

20

Material Icons. It is possible in a font to define special glyphs for combinations of characters. An example in English is the glyph æ, which is a combination of a and e. This is called a ligature. Other examples are special renderings of ff, ft and tt. Instead of drawing an f followed by another one, the two glyphs are drawn as a single connected glyph: f f versus ff. What the designers of the Material Icons set did is (ab)using this system to make it easy to use icons.

Let's take a step back for a moment. You'll notice in the usage of the add icon that it is possible to include it by directly using a character code that is mapped, in the font, to the correct icon.

<i class="material-icons">&#xE145;</i>

This refers to Unicode character U+E145, which falls in one of the Private Use Area blocks of the Unicode specification. This means that no character is usually assigned to this position and every font designer is free to put any glyph they want at that position. Google chose to put the add icon at that spot. Thus, this character, with font family Material Icons, will render as a nice icon.

In addition to that, they created a ligature in their font family that says that the combination of characters add should be rendered as the same glyph. When browsers support ligatures in their font rendering engine, this will result in the same output as using &#xE145 would.

Google documents this very briefly as well.

In a nutshell: both  (U+E145) and the string add will render as add when using Material Icons.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
As character: <span class="material-icons">&#xE145;</span>.<br>
As ligature: <span class="material-icons">add</span>.

Boostrap and Glyphicons. The Glyphicons font does not define ligatures, but referencing the correct characters definitely does work. This is exactly what Bootstrap does, by setting (for the plus icon from Glyphicons) content: "\002b";. This sets the content of the span it is applied on to the character represented by the escaped code point U+002B, which is the plus sign. The Glyphicons Halflings font family renders this as some sort of icon, just like Material Icons. The only difference is that the icon is represented by a different character.

Why does using \002B in a span not work, you ask? That's because escaping a Unicode character in CSS is different than in HTML. In HTML, you'd use &#x002B; instead (or &#x20AC; to get the example you have in your question). You can read more about escaping here.

Thus, + (U+002B) renders as plus and € (U+20AC) renders as Euro sign when using the Glyphicons Halflings font family. You'll notice that for the Glyphicons, they chose to use characters resembling the icons, whereas Material Icons use special, reserved characters.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span style="font-family: 'Glyphicons Halflings'">&#x002B; &#x20AC;</span>
Just a student
  • 10,560
  • 2
  • 41
  • 69
19

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)
Rene van der Lende
  • 4,992
  • 2
  • 14
  • 25
  • 2
    You quoted ligatures, as if they are something 'weird' that OP 'came up with'. I'm bothered by it more than I probably should be. Ligatures are a part of the history of font design and far predate icon fonts. They are now being abused to make it possible to use icons by some sort of alias, but were initially not at all intended like that. This, combined with a lack of explanation/background, `class="font family"` and using too much boldface leads me to downvote your answer. Notify me if/when you edit and want me to re-evaluate my vote. – Just a student Jul 06 '17 at 08:01
  • 1
    I guess you missed the last line in my answer stating 'the important info for a **web designer**'. I think you will have to agree that you are giving an honest, yet personal opinion on a unbiased and simplified technical answer to a question, what stackoverflow exactly is for. Font developer sites (or Wikipedia) is for deeper/deepest tech insight and history. (Which the poster did not ask for, I might add). I understand your sentiment, though, but don't take things too personal. – Rene van der Lende Jul 06 '17 at 13:17
  • 1
    (1) I don't think I gave a personal opinion, I tried to explain precisely what my reasoning is. I suggest to add some background and get rid of the quotes around ligatures. Maybe add a link or two. You'd have my upvote then :-) (2) Not only web designers use Stack Overflow. (3) Simplified answers can be helpful, but are not what Stack Overflow is for. Anyway, as I said, I think your answer would be even better when you'd link to "deeper tech insight" resources. (4) Very much trying to keep this not personal and never thought you downvoted me. I'm trying to carefully consider my replies. Cheers – Just a student Jul 07 '17 at 06:50