In CSS/JavaScript, How Is This Icon/font Plugin Implemented?

Demo at Jsfiddle http://jsfiddle.net/hc046u9u/ What confused me the most is the icons are not implemented by class attribute (like or

Solution 1:

It's a "trick" where the icons are implemented as composed glyphs in the font. It means that letter combinations "add" and "replay" are displayed as one character in the font, similar to how "fi" and "fl" are often represented as one character in many fonts. (See this Wikipedia article for more information.) The icons therefore don't come from CSS declarations.

You can see how it works if you apply the font to an input field: if you start typing randomly, you don't see anything because individual characters don't have a glyph assigned to them, but if you type "add" you'll see a + symbol appear.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" >

<textarea class="material-icons">add remove replay</textarea>

Share