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.

Concatenation

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.

Aubrey

You have to add that the web only get shown in 72dpi even if you like it to show more, so its kinda irrelevant unless you have a pdf thats getting printed. – Sabotage

PostScript Type 3 fonts can have colour. SVG fonts can have colour. Both are essentially just font containers for normal drawing operations in their respective domain. So your claim that there is no font standard that does support colours is wrong. – Halpern

@SimonPertersen: You're right. I updated my answer to now say small or unsharp. This includes both phenomenon of fixed size images on high density outputs (whatever they are). Thank you. – Aubrey

@Joey: I updated my answer to include this info. My original answer was talking about general font info and formats so it was a bit too generalized. But you're right at least in regards to SVG. But I'm sure we both agree we shouldn't include Type3 fonts in this box since it's not web specific at all and is barely a container that's never been used on computers. Not even ATM supported it. But thanks for your input on this matter. – Aubrey

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/

Yost

Answer 3

When you use fonts, different browsers on different platforms will give different results. PNG files will give stable and independence results.

Metaplasm

Answer 4

I have implemented a font icon library using icomoon and it works well on all the browsers including ie7. For small sets of icons this is a suitable practice, the font's scale properly, can be changed to any colour you require and you don't have to worry about PNG/GIF transparent background colours matching.

However... If your library becomes larger (mine is now around 40 icons), it becomes increasing difficult to maintain. If the designer ceases to work on the project, or you need to change the icons, it is a laborious process to update the fonts. Everything then needs to be retested. It is also difficult to dynamically icons using CSS (for ie7).

So, given the difficulty of maintenance, I'm considering switching back to a series of sprites (of different colours). The reasons being:

Any designer can easily add a new icon to the set. The CSS doesn't need to be retested or altered. You don't have to screw around with javascript workarounds for IE. You don't need javascript at all.

For retina displays, simply create a verion of the sprite at twice the size,. You will probably need to have a different version of the CSS for retina regardless, as all the other images on your site will have the same density problem.

Prosperous

Answer 5

I would recommend 2 solutions to your problem these is what i would use for best customers support like they wanna change the text, size or other stuff

Use Fontsquirrel to make a webfont and embed it in your website trough your css and add it in your ftp directory if thats not getting pretty then use google web fonts

If non of that looks like it should i would go for the image solution your boss said..

All this also depend on which amount of time you have to solve your problem and such

Btw if you cant access the html i thought you could access the css which you can do trough most backends, if you cant then go for the image!

Last but not least, if you decide to go with the image solution, make a sprite which you direct trough on a background position. This way you only have to load 1 picture for all your little icons.

Collagen

Answer 6

He's right. I'd use css sprites in this case. And if you have to support ie7 (I'm so sorry) you don't really have any options. Exploring those things on your own - of course, you never know what will come in handy or when.

Ursuline

Thanks for your reply... not one I wanted though! I think you might be right, I should play with these things on my personal projects (I've spent the last two hours reading about techniques I'll never use for work, oops!) ...Or maybe I'll squeeze in enough icons on the site to make it worth it, hehe – Concatenation

Not true about the "I'll never use for work", I'm not sure now which famous golfer said that 'the more I practice, the luckier I get' (Nicklaus?) and that is pure gold. Who said you're learning stuff to use in your CURRENT job? By now you probably figured out that stuff can change on a dime in this business. – Ursuline

IE7 market share at time of writing approx 2%. I would't worry about icons for the poor souls that use IE7, they've got more important things to think about (eg basic Gmail support). – Westsouthwest