Icon Fonts: How do they work?
Solution 1
Glyphicons are images and not a font. All the icons are found within a sprite image (also available as individual images) and they are added to the elements as positioned backround-image
s:
Actual font icons (FontAwesome, for instance) do involve downloading a specific font and make use of the content
property, for instance:
@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";
}
As the content
property isn't supported in older browsers, these also make use of images.
Here's an example of completely raw FontAwesome in use as a font, turning 
( - you may not be able to see this!) into an ambulance: http://jsfiddle.net/GWqcF/2
Solution 2
If your question is how a CSS class can insert a specific character (that will be rendered as an icon in the special font), take a look at 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"; }
So a CSS content directive is used to insert the character (which is from a special private-use reserved area of Unicode that does not mess up other readers).
Solution 3
How webfont icons work?
Web-fonts icons work by using CSS to inject a specific glyph into the HTML using the content property. It then uses @font-face
to load a dingbat webfont that styles the injected glyph. The upshot is that that injected glyph becomes the desired icon.
To begin, you’ll need a web-font file with the icons you need, either defined for particular ASCII
characters (A, B, C, !, @, #, etc.)
or in the Private Use Area of the Unicode font, which are spaces in the font that will not be used by specific characters in a Unicode encoded font.
Read more, how to create webfont icon at Responsive Webfont Icons.
Vivek Chandra
Updated on February 23, 2020Comments
-
Vivek Chandra over 4 years
I understand that icon fonts are just fonts and that you can get the icons by just calling their classname, but how do icon fonts work?
I've tried checking the related icon font resources loaded in Chrome to see how icon fonts display icons (in comparison to general fonts) but I haven't been able to figure out how this happens.
I've also been unsuccessful in finding resources on how this "icon font technique" is done, even though there are loads of icon fonts available. There are also loads of resources showing how icon fonts can be integrated, but no one seems to be sharing or writing about how this is done!
-
Vivek Chandra over 11 yearsstackoverflow.com/questions/12379153/… - the answer says - its basically fonts
-
James Donnelly over 11 yearsFontAwesome icons are fonts. I've even mentioned FontAwesome in my answer and gone on to say how they handle browsers which do not support their CSS method of adding the icons to the page.
-
Vivek Chandra over 11 yearsThen how does font icons work ? - how can font be rendered as icons ? - with font icons - are the sprites downloaded ?
-
James Donnelly over 11 yearsThe icons are the font's characters. As a crude example: the letter "Z" could be designed to look like a suitcase, saved as a font and then used on a website.
-
Vivek Chandra over 11 yearsSorry that i changed the question - I was under the impression that font icons and Glyphicons are the same. I know how sprites work. Wanted to know how font icons worked.
-
Vivek Chandra over 11 yearsSo you're telling that all the icons are really just distorted characters?
-
James Donnelly over 11 yearsHere's an example of completely raw FontAwesome in use, turning

into an ambulance: jsfiddle.net/GWqcF/2 -
James Donnelly over 11 years@VivekChandra yes that's right! :-) Icon fonts are just like any other font except that the characters are styled to look like icons. FontAwesome uses a range of characters reserved for "private use".
-
Vivek Chandra over 11 yearsAwesome. Thanks for all the resources - will look into it, things are more clearer now.
-
Black over 8 yearsMy Browser does only load little Boxes with e.g.
F0F9
inside of it. Why? -
James Donnelly over 8 years@EdwardBlack did you remember the `` character? Have you loaded Font-Awesome correctly?
-
Black over 8 yearsI opened the jsfiddle from you, and only little boxes are loaded
-
Sunil Garg almost 7 years@JamesDonnelly, Can you explain how material icons work. stackoverflow.com/questions/45323577/…
-
CodyBugstein about 6 yearsWhat does the slash f mean?
-
hansvb about 6 yearsThe
f
is not part of it, it's just the hex number 15. The backslash starts the escape sequence for a hexadecimal codepoint.\f004
in CSS is like
in HTML. -
Sam over 5 yearsUrls in this jsfiddle are out of date, just replace them with actual (e.g.
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot
and so for.woff
and.ttf
), you'll see image in the second string. -
James Lin almost 4 yearsDoes fontawesome download all the fonts upfront?