font icons vs png icons

Question

i use icons for labels, but i saw this website: www.fontello.com where you can create font with icons.

But when i create font with icons it is bigger than all my icons, becouse there is svg, ttf, woff and eot, all that 4 fonts are bigger that all png icons.

@font-face {
  font-family: 'fonticons';
  src: url("../font/fonticons.eot");
  src: url("../font/fonticons.eot?#iefix") format('embedded-opentype'), url("../font/fonticons.woff") format('woff'), url("../font/fonticons.ttf") format('truetype'), url("../font/fonticons.svg#fonticons") format('svg');
  font-weight: normal;
  font-style: normal;
}

All my icons are optipng compressed .png images.

Does this work on all browsers ?

So why should i use this font method ?

And any alternative for fontello.com ?

Answer 1

Good question. I am currently experimenting with Fontello and font icons to see if it's a viable approach.

It's a viable approach. I have used font-based icons in production applications and tested on nearly every popular browser/device (Fontello has examples which even support IE7). I have only good things to say about Fontello, but you can use any tool that you want.

Font icons can scale to any whatever (proportionate) dimensions are desired and work on any pixel density. If you look at your site on a high density display (such as Apple Retina, and increasingly popular on all mobile devices) there is an enormous difference between a raster format (like PNG) and a vector format.

You can define all icons in a single file (like a sprite), but unlike a sprite you don't have to worry about the dimensions of the items within the file. Furthermore, you can scale each item independent of other items in the file.

Considerations

• You will need to manage the font file. These are not human-readable, so you will need to use a tool.
• There are associated CSS selectors to maintain (usually one selector per icon).
• Extra markup is occasionally needed to achieve a particular effect/fix a problem.
• Minor sizing issues; not all icons fill a box uniformly and they are subject to the text rendering idiosyncrasies of each browser.

These considerations are probably less work than using sprites or creating both PNGs/SVGs for every icon.

Keep in mind that a font icon does not contain any color information. However, you can style it as you would any other text. This includes using ARGB colors and applying more advanced CSS effects as pointed out in the comments.

Regarding file size, keep in mind that a browser will almost never download all 4 font formats. Done correctly, usually only one will be downloaded.

An alternative approach is to use SVGs (not SVG fonts) for icons. Browser support for SVGs is less than that of @font-face, so you will need a raster fallback.

Answer 2

This handy site shows you with CSS features are supported by which browser. In this case < IE9 can give you problems.

http://caniuse.com/#feat=fontface

Personally, I prefer to use CSS sprites for my UI elements to ensure consistency acroass browsers.