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.

Answer 3

quick disclaimer: i've been working on an icon font library called pictonic.

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

in terms of filesize, you might find the following comparison of pngs vs icon fonts interesting:

http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14

you should verify that the icons are being converted to vector format using tracing. since many vector formats like svg also support bitmaps, if your icons are being imported as bitmaps you won't experience any of the filesize related benefits of converting them to a vectorized font.

in my experience, even at 16x16px, a ttf font should be much smaller than the combined filesize of 20 or so icons. as the image size increases this gap widens as vectors have the same filesize at every scale.

Does this work on all browsers ?

depends on what methods you use. pictonic is tested on all browsers back to ie5 but requires a bit of js for old ie versions (5-7). So in theory its possible to get icon fonts working in all browsers.

So why should i use this font method ?

icon fonts are really versatile, you can manipulate them with css in ways that make image icons seem quite inflexible. Here is a demo: https://pictonic.co/#main-demo

so for example, you can experiment with your layout and change the color, size, and shadow of all your icons with just a few lines of css. this is pretty handy.

also, since they are vector based, they are retina ready out of the box, so they look amazing on retina screens like those on apple retina displays (retina macbook, iphone 4+, ipad3+), whereas images require media queries to swap in double resolution versions which take up even more space.

i believe they're pretty efficient if you use the right format.

And any alternative for fontello.com ?

pictonic doesn't have the ability to import user generated icons yet, but it does allow you to generate custom icon fonts from over 2000 stunning icons, including a fairly large free iconset. and we're always adding more, so do have a look

Answer 4

Another alternative for you could be: http://fontastic.me/

;)

Answer 5

1. With font icons you include font file that are of the extension .woff, .ttf, .eot, .svg and the css file for that font. They are less in size and and you can change the size of the icon when required, with image files png/jpeg it distorts the image file, where as font icons scale properly.
2. With multiple images you have to make multiple http request to the server, which can be avoided here.
3. The font icon files are also available on cdn hence you don't have to request it from the server if some earlier website has it already cached it in your browser.
4. With fontello you can customize and use only the icons that are required.
5. There is also fontawesome current version 4.2 where you can get the font icons, if you need support for older version of browsers you can opt for old version no 3.
6. You can also customize it using LESS/SASS.
7. Another option is using css sprites you can optimize it using traditional methods or using online services.
8. Using it in html is pretty simple, once you make sure the css files and font files are loaded in the browser you just need to add class name to the html element and you are good to go, you can then customize the font size, color, background color as per your wish.

Font awesome

Fontello

You can find the CDN here