Best IT Recipes

Icon Fonts: How do they work?

I understand that icon fonts are just fonts, and you can get icons just by calling their class name, but how do icon fonts work?

I tried checking the icon font resources associated with it downloaded in Chrome to see how font icons display icons (compared to common fonts), but I could not figure out how this happens.

I also failed to find resources on how this “icon font technique” technique works, even if there are downloaded font icons . There are also many resources showing how icons can be integrated , but no one seems to be sharing or writing about how this is done!

+49
css fonts web icons icon-fonts
Mar 19 '13 at 15:06
source share
4 answers

Glyphicons images , not a font. All icons are in the sprite image (also available as separate images), and they are added to the elements as located backround-image s:

Glyphicons

Actual font icons ( FontAwesome , for example) include loading a specific font and using the content property, for example:

 @font-face { ... src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); ... } .icon-beer:before { content: "\f0fc"; }

Since the content property is not supported in older browsers, they also use images .

Here is an example of a completely raw FontAwesome that is used as a font, turning &#xf0f9; (& # xf0f9; - you cannot see it!) to the ambulance: <a5>

+33
Mar 19 '13 at 15:13
source share

If your question is how the CSS class can insert a specific character (which will appear as an icon in a special font), check out the source for FontAwesome :

 .icon-glass:before { content: "\f000"; } .icon-music:before { content: "\f001"; } .icon-search:before { content: "\f002"; } .icon-envelope:before { content: "\f003"; } .icon-heart:before { content: "\f004"; }

Thus, the CSS content attribute is used to insert a character (which is from a special reserved Unicode private use area that will not ruin other readers).

+11
Mar 19 '13 at 15:13
source share

How Webfont Icons Work

Webfonts icons work with CSS to insert a specific glyph into HTML using the content property. He then uses @ font-face to load the dingbat webfont, which styles the entered glyph. The result is that the entered glyph becomes the desired icon.

First you need a webfont file with the icons you need, either specific to certain ASCII characters (A, B, C,!, @, #, Etc.) or to the private area of ​​the Unicode font, which are spaces in the font which will not be used by specific Unicode font characters.

Here you can read how to create a webfont icon -> link

+4
Jan 13 '17 at 17:55
source share

Check it out fully using CSS

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> .battery.icon { color: #000; position: absolute; margin-left: 2px; margin-top: 6px; width: 13px; height: 7px; border-radius: 2px; border: solid 1px currentColor; } .battery.icon:before { content: ''; position: absolute; right: -3px; top: 1px; width: 2px; height: 3px; border-radius: 0 2px 2px 0; border-top: solid 1px currentColor; border-right: solid 1px currentColor; border-bottom: solid 1px currentColor; } .battery.icon:after { content: ''; position: absolute; left: 1px; top: 1px; width: 8px; height: 5px; background-color: currentColor; } </style> </head> <body> <div class="battery icon"></div> </body> </html>
+2
Feb 07 '17 at 21:46
source share


More articles:


All Articles