Menu
Demo at Jsfiddle
http://jsfiddle.net/hc046u9u/
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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?
231
Icon fonts are fonts that contain symbols and glyphs instead of letters or numbers. They're popular for web designers since you can style them with CSS the same way as regular text. Also, since they're vector's they're easily scale-able.
The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML element (like <i> or <span> ). All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)
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" rel="stylesheet">
<textarea class="material-icons">add remove replay</textarea>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
