Icons as Fonts for Responsive Design

Icon Fonts for Retina Ready Responsive Design

In Responsive Design, one uses Media Queries in the CSS to rearrange elements on the page to flow irregardless of what the device may be.

As we touched on before, you can use Media Queries to check if the screen is a Retina display, and if so replace an image with one that is double the size so that it remains crisp. Using an icon font, there is no need.

Vector Icon Font Sets

Lately, there have been quite a few icon fonts released. These are perfect for responsive design. We can embed using @font-face in our CSS. Fonts will scale to any size while remaining crisp and clear.

These are what I recommend:


My favorite icon set so far. On sale at Dealotto for $19 currently. Usually $49. ( Until 4/13/12 )


Also over at Dealotto for $10. Usually $24. Set comes in @font-face and editable vector file form.


This set comes Zeldman approved. €19.

These were my favorites, however, for many more see a roundup at CSS Tricks.


Fico gives a good example on implementation:


Full Disclosure: This article above contains affiliate URLs. Did the above resources ask me to create this post? Nope. Just sharing what I love.