Demo at Jsfiddle
/
<link href="+Icons" rel="stylesheet">
<link rel="stylesheet" href=".97.0/css/materialize.min.css">
<script src=".1.1/jquery.min.js"></script>
<script src=".97.0/js/materialize.min.js"></script>
<i class="material-icons">add</i>
<i class="material-icons">replay</i>Demo at Jsfiddle
http://jsfiddle/hc046u9u/
<link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.0/css/materialize.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<i class="material-icons">add</i>
<i class="material-icons">replay</i>What confused me the most is the icons are not implemented by class attribute (like <i class="icon-add"></i> or <i class="icon-reply"></i>), but by the inner text of the <i> node.
When I view the <i> node in the developer tool of chrome, they look almost the same and seem indistinguishable for CSS selector.
If the icon is set by the inner text, how could CSS asign different icons for these <i> nodes?
Another thing that I could not understand is how these icons are implemented (icon font, PNG or SVG). It seems that they are implemented by icon font, but I can't find any CSS declaration like:
.fa-flag:before {
content: "\f024";
}
If the icons is not implemented by the :before selector and content attribute, how are they implemented?
- It's an imported font file ? – adeneo Commented Jun 27, 2015 at 14:18
- The woff files es from here – adeneo Commented Jun 27, 2015 at 14:19
- @hanfeisun The icons are implemented by class. It so happened that the icons were from the font family 'Material Icons'. – Alberto I.N.J. Commented Jun 27, 2015 at 14:20
-
@adeneo I see there is a woff file, but how can the content of
<i>node be replaced by the encoding of the character in the Woff file? – Hanfei Sun Commented Jun 27, 2015 at 14:21 -
@AlbertoI.N.J. Thanks, but I didn't see the inner text of the
<i>node be replaced by the encoding of special characters, such as"\f024". Moreover, I can't find the setting of special character by CSS.. – Hanfei Sun Commented Jun 27, 2015 at 14:24
1 Answer
Reset to default 22It's a "trick" where the icons are implemented as posed glyphs in the font. It means that letter binations "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 e 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./icon?family=Material+Icons" rel="stylesheet">
<textarea class="material-icons">add remove replay</textarea>