O'Reilly logo

Responsive Web Design with HTML5 and CSS3 by Ben Frain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required