Why I love Icon Fonts
Icon fonts are just plain awesome, they completely take away the need to use images for your icon needs. If you are a supporter of designing-in-the-browser like I am, then this is great news for you. I first found out about the power of icon fonts from Chris Coyier in his article “Using fonts for icons”, and since then my interest in these things has been growing.
So what are icon fonts?
You can think of an icon font as any other custom font you would use for a project. Its essentially a collection of characters, or in this case icons, that are mapped to specific letters of the alphabet. The true beauty of these things is how flexible they are in comparison to images. Icon fonts can be styled via CSS in many ways, and more importantly since they are a font they can be scaled up in size quite nicely.
Why Fontello sealed the deal
Normally you add in a icon font using the simple @font-face rule to load it from your server. The downside of this however is that you have a file packed full of icons you will probably never use. This brought up an issue of performance as this was another file that had to be loaded, I had to find a way to pick out only certain icons from the package.
While browsing through Twitter I found an elegant solution to this problem via the web app Fontello. This delightfully simple tool allows you to specifically pick which icons you want to use, and even allows you to map your own characters for each icon. Since I did not necessarily need every icon that these icon fonts packs came with, this was exactly what I needed.
Real world examples
Below I have put together some simple buttons and links that show off the true power of icon fonts. Keep in mind there are several different ways to go about using font icons semantically speaking, so I would suggest taking a look at these articles before creating your own.
!