feb 7 2012
Icon Fonts
Responsive Design is the new black for web designers. But with responsive design comes a lot of challenges. One of them is to make ui icons scale with the rest of your layout. However, icon fonts is a promising solution in its infancy.
Icon fonts are vector based graphics and are able to scale indefinitely without losing quality, as opposed to the more well known and common pixel based icons. But icon fonts are also tied to characters and this is where the challenges come in, when we want them displayed correctly without making too much trouble in screen readers or screen scrapers.
I have been collecting a few resources on the topic.
Using Icon Fonts
Besides being a service, that offers a nice collection of scalable icons, Pictos also has a great article on the pros and cons of icon fonts and how to use them.
Icon Fonts are Awesome
Chris Coyier of CSS-tricks.com has put together a nifty example, where he demonstrates how easy it is to scale, colorize and shape the shadow of icon fonts with plain and simple CSS.
How to make your own icon webfont
Over at Webdesigner Depot, Heydon Pickering has written a tutorial on what makes a good icon and how to turn it into a webfont.
Icon Fonts
Finally, if you are not yet ready to make your own icon font, Font Squirrel has a small collection of free icon fonts, also available as @font-face kits. Go grab ‘em and try them out.
