Oh.. the 90's. All those CRT monitors and 800px width table websites. Good ol' days when things were simple. Unfortunately, those days are over. Now we have zillions of different screen sizes and resolutions, and retina displays that are unbelievably beautiful pixel perfect resolution - and made every single layout you created before using images look like crap.
You probably had problems using image icons on responsive layouts before. Some of you probably solved this problem using different sizes of images for different displays ( @2x and media queries ) but the thing that really grabbed my heart when I started using was Icon Web Fonts.
As web fonts are scalable, you don't have to worry about setting different image paths for different devices. You just choose the font-family ( or families ) you are gonna use and that's it. Pixel perfect icons! :)
It's hard to find icon font families that actually have all the icons your are going to need in your layout, then you could have to import another font-tamily just to use a single icon. That's why I'm using Fontastic on all my recent projects. It's an online tool that allows you to create custom icon-font families gathering icons from different families and even uploading your own to create a custom set.
Just for the record, another cool feature you can use on icon web fonts instead of images is changing the color by CSS. Do you have another mind-blowing tip to handle icons on different devices? Feel free to drop a line about it :D