Displaying Icons with Fonts and Data- Attributes

Todays 24ways article is Displaying Icons with Fonts and Data- Attributes, taken partly from Chapter 6 of the upcoming Icon Handbook, but rewritten to fit to the 24ways format. Instead of using the traditional route of PNGs, web fonts offer a scalable and resolution independent solution. Combined with HTML5 data attributes, you can create one CSS rule to style them all in one go. This article covers both the advantages and disadvantages of the technique.

Thanks must go to Drew Wilson who helped me understand how to use data attributes. He created Pictos the excellent icon font used in the article, and his experience in making Pictos was a valuable source of research.

Read: 'Displaying Icons with Fonts and Data- Attributes'