Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Icon Fonts: How do they work?

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!

like image 687
Vivek Chandra Avatar asked Mar 19 '13 15:03

Vivek Chandra


People also ask

What are the advantages of using icon fonts?

Using icon fonts not only will look great on any screen resolution or display, it saves time and hassle during the entire development process. In addition, not only does it improve workflow, but using icon fonts replaces the need to render icons on a webpage using images.

Do icon fonts scale well?

The Advantages of Icon Fonts They're also difficult to manipulate without reworking the image in an image editor. Fonts don't have these problems. They scale well and don't require http requests for each character.

Should I use icon fonts?

Winner: Icon fonts are the winner when it comes to support, as they are supported across browsers, desktop, and mobile.


2 Answers

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-images:

Glyphicons

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

like image 97
James Donnelly Avatar answered Sep 18 '22 13:09

James Donnelly


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).

like image 23
Thilo Avatar answered Sep 19 '22 13:09

Thilo