Icons as Fonts for 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:

Pictos


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

Tipogram


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

Fico


This set comes Zeldman approved. €19.

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

The CSS

Fico gives a good example on implementation:


Related

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

12 Apr 2012 • Filed under Design