Iconic Fonts Explained – What They Are and Why You Should Use Them

Font Awesome Icons Example

Iconic fonts are scalable vector icons that can be customized through CSS (Cascading Style Sheets) just like any other font. This gives you the ability to easily edit the size, color, drop shadows and more all through CSS without needing to bug your designer to export additional images. The result is a crisp clean look as large or small as you designate in CSS.

Desktop, tablet and mobile friendly iconic fonts work on all screen resolutions, and since icons are vectors, they look great on high-resolution displays.

Page speed is another advantage of iconic fonts. Because your browser only needs to load the font once for all icons used, speed will increase and the file sizes for the icons will also be smaller than most image files – resulting in decreased load times.

Not every iconic font set is the same. One thing to look out for is screen reader capability. Some icon fonts can trip up screen readers making it difficult to identify and interpret what is being displayed on the screen. This can mix up text-to-speech or braille output devices. Another thing to remember is browser support. You want the icons to render correctly across all browsers so checking for browser support is important. Another limitation is that the icons can only be a single color. Color gradients can only be made using CSS3 gradients.

So where can you find an iconic set to use? Font Awesome created and maintained by Dave Gandy allows you to download the latest collection – one font with 361 icons to choose from, and it’s completely free for commercial use. Font Awesome is fully compatible with Twitter Bootstrap and is also found in Scaffolding framework (coming soon).