[jonathanmoore]

I have been using this method for nearly a year on various projects and theme designs. The font icon method is incredibly useful when you want to give user the flexibility to change up the color of the icons. Plus, as mentioned using CSS pseudo elements with content should not effect modern screen readers.

One of the disadvantages mentioned in the article is the file size, but it can be drastically optimized. My favorite icon font is Pictos by Drew Wilson (http://pictos.drewwilson.com/). When I use it in a site design I will actually recreate the font file with just the few icons I need, usually 6-8 characters.

To reduce the font file size just load up the icon font in Font Squirrel's font-face generator (http://www.fontsquirrel.com/fontface/generator) and use custom subsetting to specify the needed characters.

Full Pictos Font EOT (19 KB), WOFF (13 KB), TTF (18 KB), SVG (41 KB) Total - 91 KB

Optimized Pictos Font (8 characters/icons required) EOT (6 KB), WOFF (4 KB), TTF (5 KB), SVG (5 KB) Total - 20 KB

[dreamdu5t]

Why don't you use SVG in your case?

[jonathanmoore]

I would love to, but in our case the two limitations are Internet Explorer 8 (and below) and cross domain limitations for the IE work arounds. The specific projects we're using the Pictos icon font on are being served up from a secondary asset server were we have no ability to add cross-domain policies or .htaccess modifications required for SVG or the .htc fixes.