Sizeable icons which are perfect for responsive designs

Smart people are already extending what's possible with CSS3 to great effect. One technique I've seen implemented that I love and now use regularly myself is using @font-face icons in a design.

"What are they?” I hear you cry. Well, my inquisitive friend, I'll tell you. Remember we used the CSS3 @font-face rules in the previous chapter to apply custom typography to our design? @font-face icons are merely fonts specifically made to create commonly used icons. Instead of using lots of separate graphics files for each icon, or even grouping them together into a single, larger sprite image, @font-face icons allow you to apply a single font for every included icon (that's just one http request—woo hoo!). What's more, as it's a font, it scales beautifully—perfect for responsive designs. Fico is a great example, check it out here: http://fico.lensco.be/.