Icon fonts vs images

Question

My manager tells me not to use icon fonts on our websites, as it is another http request plus the extra kBs to download. Also because I would have to use content before for the font (I can't change the html), he prefers background images so it works in IE7.

Personally I love the little things, so nice and crisp and resizeable!

I get it if we only use a couple of icons on a website but if I would use, say 5 icons on a site - what do you guys think? Is it worth using an icon font or is he right thinking that it is not?

I am just a sucker for anything new and exciting, and this year it is the retina display.

Answer 1

Icon fonts and high density screens

Using icon fonts will be more and more relevant as more high resolution/density displays become available.

A 16×16px icon can look horrible on a high density display (>300ppi). It may either display incredibly small or unsharp due to automatic scaling. A 1em font icon on the other hand will render correctly and sharply regardless of screen density.

It of course all boils down to your

• application users and
• your requirements (IE7 seems to be the major breaker)

For now sprites are the way to go.

Downsides?

Icon fonts have a different problem as well. All icons are single colour. There's no font standard as of yet to have multi-colour capability. And it likely won't be. At least not for fonts. There are possibilities of doing multi-colour using SVG fonts which isn't a font standard/format per se but can be font container and used as a font delivery mechanism in your browser. Doing multi-colour icons as SVG fonts makes it possible to have colourful scalable icons (thanks to @Joey).

Vectorised icon images would better suit full colour resizeable icons.

Requests and font icons

Your boss' argument about additional request are simply false. It doesn't really matter whether your icons are part of a file or (in best case) part of a sprite image.

Both yield an HTTP request to fetch the resource. File size heavily depends on complexity and format but it may be that sprite image will be smaller. But having a few kilo larger font file doesn't really make much difference. They both get cached on the client afterwards.

Answer 2

I personally use Font Awesome as my primary resource for fonts, In my case I load it from the CDN hopping other pages that use it already fetched it and this was cached by the browser.

If file size is a concern, I can recommend to you this incredible awesome tool

http://fontello.com/

It allows you to merge several fonts into one single file, and only includes the icons you actually use.

http://www.icnfnt.com/ does the same for fontawesome, but I kinda like more fontello because it allows to use more fonts.

icon fonts is the way to go honestly in my opinion...

EDIT I lately have being using this app a lot too: http://icomoon.io/