I successfully created a custom icon font to showcase our ability to implement this for icons on our site, in browsers back to IE:
Doing icon fonts right takes so work and some good code, but ultimately in can be done. One thing to mind is that since fonts allow outlines only, there will be no gradients, multiple colors, etc.
This is mostly good and many effects can be achieved via CSS Text Shadow and other CSS3 features.
The power of icon fonts is huge as it is a minimal server load and allows for rich customization and a cross-browser solution that is solid and bulletproof.
If you read Drew Wilson' article on 'Using Icon Fonts' (http://pictos.cc/articles/using-icon-fonts/) you might think using the [data-icon] attribute is a good idea. Well it is not for IE support.
HTML:
<a href="" data-icon="C">Cool Link</a>
CSS:
[data-icon]:before { font-family: "'"Pictos Custom"'"; content: attr(data-icon); }
Instead you can assign number/letter values to the icons in Fontforge or Glyphs Mini and then use standard HTML like this:
<span class="icon">t</a>
This will do the trick.
I originally was intrigued by Glyphs Mini and its touted ability to easily create some cool icon fonts. Their process recommended finishing off their exported .ttf or .otf file into FontSquirrel to create a full cross-browser kit. When FontSquirrel changed their generator, IE support went away for a short while and I used these tools to find a better solution. Ultimately fontforge is much better quality than Glyphs and more powerful and it is 100% free. As in FREE lunch. So here are the tools you will need to setup on your Mac. You should really have these anyway.
- Xcode 4.3: http://itunes.apple.com/us/app/xcode/id497799835?mt=12
- Homebrew: http://mxcl.github.com/homebrew/
- Fontforge: after installing homebrew type 'brew install fontforge' and watch the magic happen
- Glyphs Mini (optional): http://itunes.apple.com/us/app/glyphs-mini/id469036911?mt=12 (this is not necessary with Fontforge installed)
http://www.fontsquirrel.com/fontface/generator
FontSquirrel is an awesome way to create cross-browser @font-face embeddable icon fonts. The issue is, their generator broke IE support several weeks ago.
It looks like the issue has been resolved but getting fonts in all of the formats you need can be challenging when relying on 3rd party vendors.
http://ttf2eot.sebastiankippe.com/
This little gem saved my hide when FontSquirrel went down. Combined with Fontforge, this allowed for some real crackerjack icon fonts.