Trepidation

I often use icon fonts. I know there are a lot of arguments why you shouldn’t use icon fonts, but in the interest of being expeditious, I still often turn to them as a solution. I’ll probably switch to SVG icons full time once I develop a workflow that’s preferable. Alas, until then, I’m thinking about icon fonts.

Comparison

I’ve been using this pen on CodePen to compare the design and construction of various icons in the icon fonts I routinely utilize. I have styled them to be able to see the extends of the character using a contrasting background. It helps me decide which icon is going to work for the particular case I want to use it.

See the Pen Icon Fonts by Ryan Burnette (@ryanburnette) on CodePen.

Performance

Sometimes I load an icon font library from a CDN or as a Bower package that is bundled into my project. It works, but it’s not the right approach if you have performance concerns. Icon font libraries have a lot bulk. I usually only need a handful of the icons they provide. Fontello is a great way to improve performance by cherrypicking the icons you need. As a bonus, you can mix the libraries, picking the icons you like from each.