Icon Fonts

16 Sep 2012

The facts

Icon fonts are simply fonts that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters. Icon fonts are like dingbat fonts, but are designed specifically for UIs. Icon fonts, like other web fonts, use the CSS @font-face rule to display icons in web browsers. (Wikipedia)

Advantages

• Resolution Agnostic: Crisp at any resolution, even Retina
• Simple Styling: Edit the styling easily with CSS (color, size, gradient, shadow). Styling can even adjust on the fly.
• Great Performance: Smaller file than image sprites, good for mobile
• Cross-browser support (even IE) Details
• Demo by CSS-Tricks.com
• Examples from Font Awesome

Icon Font Sources

General Icon Fonts

• Modern Pictograms
• Entypo (also available in vector)
• Tipogram (also available in vector)
• Sosa
• Pulsar
• Raphaël
• Iconic

Customizable Icon Font Sets

• Shifticons Build your own icon font from a variety of authors
• Pictos Build your own icon font
• Fontello Build your own icon font from several different libraries
• IcoMoon Build your own icon font and add your own icons

Icon Fonts for Frameworks

• Font Awesome Icon font for Twitter Bootstrap (or other sites)
• Foundation Icons Icon font for Zurb Foundation

Build your own from scratch

• The Making of Oticons
• Glyphs Font Software

Variant: Symbol Fonts

• Symbolset

More info:

• Collection of links from Trent Walton

Should I use Icon Fonts?

Would you enjoy these benefits?

• Resolution Agnostic: Crisp at any resolution, even Retina
• Simple Styling: Edit the styling easily with CSS (color, size, gradient, shadow). Styling can even adjust on the fly.
• Great Performance: Smaller file than image sprites, good for mobile
• Cross-browser support (even IE) Details

Can you overcome these challenges?

• Limited icon icon set: Will a pre arranged set of icons cover your needs or will you need to create your own custom font?
• Not willing to be limited? Try using a stock set with a few custom additions, via IcoMoon.
• If your design requires multiple color icons, icon fonts may not work. Continue using traditional methods, such as image sprites.
• Work-around for multi-color icons: Joel Gillman demonstrates how to stack several icon pieces together.

Get Going

The great thing about the web is that it's so easy to try out new ideas like this. You can quickly this feature onto  your site and see it action. Go on, try it out!