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:
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.
For the cheap/cost-conscious (and resourceful), we shouldn't forget the array of unicode characters already installed on user's machines. There's quite a bit of useful stuff there, too:
http://copypastecharacter.com/
That is a great site too. I use it all the time.