Icon fonts are apparently all the rage these days–and for a very good reason. They’re infinitely scalable, adjustable, and customizable. Anything you can do with text in css, you can do with icon fonts. Plus, they’re a light weight option when compared to icons from images. Their downside is minimal, but it exists; you’re not always going to get great results from older browsers.
I’m personally using Font Awesome, “The iconic font designed for use with Twitter Bootstrap,”1 as my icon font of choice even though I’m not using bootstrap as my theme’s base. These icons are peppered throughout the site, and to be honest this setup has kept me from using images in cases I would have in the past.
Implementation is pretty simple, but not necessarily contextually relevant. The code is not semantically correct mostly because you’re using an element containing no content, though I don’t find it to be a particularly expensive solution:
<div style="font-size: 1.125em; padding: 10px; background: #f3f3f3;"> <i class="icon-hand-right"></i> icon-hand-right </div>
Pretty darn simple, if I don’t say so myself. I highly recommend Font Awesome if you’re looking for an icon font on your website, and obviously doubly so if you’re using Twitter Bootstrap, as it’s built to work with it from the ground up. And hey, I use it.
Update: I forgot to mention that the reason this might not work is that it relies on the :before pseudo selector, which does not work in some older browsers.
- Font Awesome on Github. This project is quite useful.