3 ms·
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
by jonathanmoore 15y ago
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/ 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 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 15y agoWhy don't you use SVG in your case?
- jonathanmoore 15y agoI 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.