Glyphicon weirdness on IE8

Created by: BBosman

I've been seeing some weird behavior when using Glyphicons (or any other font-face) on IE8. If the page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads.

I did some research and it appears I'm not the only one.

Apparently IE8 doesn't want to play nice when you use @font-face and :before together.

So far I've had some success fixing it with a bit of custom JavaScript I got from the Stack Overflow answers and wrapping that in <!--[if IE 8 ]><script></script><![endif]-->:

$(document).ready(function() {
  var $style;
  $style = $('<style type="text/css">:before,:after{content:none !important}</style>');
  $('head').append($style);
  return setTimeout((function() {
    return $style.remove();
  }), 0);
});

I don't know if that's the ideal fix (or that it fixes it in all circumstances), but putting at least a call-out in the docs making people aware of the issue in general would be a good idea imho.