Use css icons without images

Do you still use images for your website icons? Why loading an extra sprite, or even worse extra images when you need to use icons for your labels!

Use CSS and WebFonts.

Why using special characters WebFonts instead of a sprite images?

First, easy to update. If you need to change an icon, you don't have to rebuild the images or change the coordinate for it. You simply need to change the "character" that correspond to the one you need and "et voilà".

Second, you can include multiple libraries and update your icons as easy as step number 1.

Third, the font library might be smaller to load. Some sprites might take more than 100k (png) versus a 55k WebFonts library.

Now, there's a downside of this. If you want to use colors for your icons, or you need a special colored theme (like halloween) then this might not be the best solution. These icons are considered text so uni-colored. If you need colors and want to use optimize icons, I suggest using a pattern using data-type images.

With that said, I found two free webfonts I found that are very good and not that heavy in kb.

SOSA

Sosa is an icon font including 160+ icons I find useful. The download includes the .ttf .eot .svg & .woff files need to use this icon font via @font-face.

It includes four font library:

-rwxr-xr-x 1 bookofzeus bookofzeus  55793 Mar 20 12:54 sosa-regular-webfont.eot
-rwxr-xr-x 1 bookofzeus bookofzeus 203371 Mar 20 12:54 sosa-regular-webfont.svg
-rwxr-xr-x 1 bookofzeus bookofzeus 111496 Mar 20 12:54 sosa-regular-webfont.ttf
-rwxr-xr-x 1 bookofzeus bookofzeus  62224 Mar 20 12:54 sosa-regular-webfont.woff

The library is available at: http://tenbytwenty.com/?xxxx_posts=sosa

Heydings

Same idea but different library.

-rw-rw-r-- 1 bookofzeus bookofzeus 12236 Nov 19  2011 heydings_icons.ttf

The library is available at: http://www.fontsquirrel.com/fonts/heydings-common-icons

You might have to convert it to eot, svg, woff

read the license for both of these before you use them.