Using icomoon to support Retina Displays

One issue with retina displays that you may have come across is that the use of 72 dpi images look awfully pixelated. 

One approach is to use two images, one for retina and one for normal displays.

#myimage {
	width: 400px;
	height: 300px;
	background: url(lo-res.jpg) 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
	#myimage {
		background-image: url(hi-res.jpg);
	}
}

But what if you just want to display a monochrome icon. This is often the case in the use of  a logo or call to action. Well I have experimented with using svg's for background images but cross browser support is limited and I had some issues getting svgs to render consistently in those browsers that did support svg elements. Well have you thought about creating your own webfont and embedding your glyphs there to be used across your site?

This is possible with icomoon that provide you with a free tool that makes creating your own web font using your custom glyphs etc a breeze. You can then download your font and add it to your theme. You also have the premium option that enables you to serve this font file from their cdn which takes some of the load of your website and more importantly streamlines the process of updating your glyphs and respective css.

For those of you who have not heard of icomoon, I would encourage you to try it out as it could help you slim down the amount of includes required for your site to work, and also has the benefit of providing support for retina displays who will now see your icons and graphics looking crisp at their native pixel density as well as providing you a means of colour coding your site using css only. 

In other words using something like icomoon could be a win, win win for your project or organisation.

https://icomoon.io