jQuery fix for icon fonts in IE 8

IE 8 is rapidly becoming the bane of modern web development, but at around 10% market share we realistically can’t drop support for it just yet.

On a recent project I encountered a weird bug whereby the icon fonts I was using weren’t rendering at all on IE 8. Instead all you could see was a rectangle where the icon should have been. Great stuff, cheers for that Microsoft. I googled and found a fix on stack overflow in vanilla JS. I rewrote it in jQuery as it’s a wee bit more concise and it does the job nicely.

Make sure to only load the script for IE 8, as it’s unnecessary for modern browsers.

var $style = $( '<style>:before, :after { content:none !important }</style>' ).appendTo( $( 'head' ) );
setTimeout( function() {
    $style.remove();
}, 0 );

Don’t forget to wrap this in a jQuery( function( $ ){  … }) call!