Use css icons without images
Posted on Saturday August 24, 2013 by Eric Potvin
Do you still 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 to use 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 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
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.