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 a

Answer 1

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