Icon Fonts are very mainstream now. Icon Fonts are CSS generated images such as Facebook icons, arrows, currency symbols and so on. Basically we’re able to use Icon Fonts (also called Glyphs or Pictograms) where we used to use images. In this Post I’ll describe the key benefits of using Icon fonts and mention some of the primary providers of free Icon Fonts.
Why Icon Fonts are so super-awesome
There are a few key benefits to using Icon Fonts over images. Why I especially prefer using CSS over PNG, GIF or JPG images is that, well I’m a better coder than designer (and I find designing in CSS far simpler than designing in Gimp, Photoshop or Illustrator). Here then are the five key reasons you should use Icon Fonts over images wherever possible on your WordPress (or other) Website:
- Icon Font filesizes are very small compared to equivalent image filesizes (and only use a single HTTP request to load).
- Icon Fonts are scalable. What this means is that the font looks great at almost all sizes (i.e. there is no need to create different size icon fonts as one would do with images).
- Icon Fonts are high-resoluion: No matter the pixel density (DPI/PPI/Retina) of your screen, Icon Fonts look sharp and crisp.
- Styling is done in CSS. No need therefore to have multiple images in varying colours if you want to use the same image in multiple colours.
- WCAG accessibility friendly. The good Icon Fonts are screen reader friendly. As WCAG v2.0 becomes mandatory for the Australian government Websites as well as other well designed Websites, Icon Fonts are gaining even more traction.
Which Free Icon Fonts you should use
I’ve written in the past on using Font Awesome and other Icon Fonts in WordPress. Here is a list of what I believe to be five of the best free Icon Fonts or Icon Font resources:
Font Awesome – the King Kong of Icon Fonts
I use Font Awesome on almost all the Websites I build. Font Awesome was built for Twitter Bootstrap and is super simple to use and very reliable. There are 361 icons in the current version (version 3.2.1) and I wouldn’t be surprised if this Icon Font is the most widely used glyph. The easiest means of loading the necessary CSS is via BootstrapCDN (NetDNA’s Content Delivery Network).
Genericons – Icons from WordPress
I have to admit to being in two minds about whether to include Genericons. The selection of icons is very limited. What is however really good about this icon set is that the Genericons Website makes it so easy to get the necessary HTML or CSS in order to use a specific vector icon.
This icon-set is just so beautiful and for some reason really looks really great on Web Pages. Raphael is a fairly limited set of icons but does include various icons that the others don’t have. Raphael is probably best used in conjunction with another set such as Font Awesome.
We Love Icon Fonts
The are various services that combine the necessary CSS/files from multiple Font Icon providers. What I like about We Love Icon Fonts is that you may choose to use their CDN to deliver the CSS (i.e. no loading of files on your domain). We Love Icon Fonts allows choosing of selected fonts from Brandico, Entypo, Font Awesome, Fontelico, Maki, OpenWeb Icons, Typicons and Zocial.
Fontello is a icon fonts generator. Select the icons you want from Fontelico, Font Awesome, Entypo, Typicons, Iconic, Modern Pictograms, Meteocons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons and Web Symbols. Unlike We Love Icon Fonts, there is no CDN version of the CSS available.
Hopefully this helps in your quest to stop using slow and inefficient images when you could be using efficient CSS for your icons.