Icons appear on IE8 / XP only after hovering the page

[theilm]

On IE8 under Windows XP the icons on the github page appear only after hovering the viewport with the mouse (or moving keyboard focus into the page). Before that, they are all shown as the square for unrecognized characters. (The problem does not seem to exist for IE7 or for IE8 under Windows 7).

[tallica]

I have exactly the same issue with IE8 on Windows XP: http://i.imgur.com/GB3Jj.png

edit:
This may be similar to: fontello/fontello#73 (comment)

[jonchay]

I have this issue as well, any fix?

[ursbraem]

In my case, on the user's machine (not reproduceable with my own IE8), icons appear on first load - but when the user follows a link to another page, they disappear and only reappear on hover or on a page reload.

So I thought maybe this has got something to do with caching.

As in my case it's for a very simple backend, I will try to send a header to prevent caching and see if this fixes it

[jonchay]

This fixed it for me:

http://stackoverflow.com/a/10557782/1718166

[ghost]

I use lazy loading for most of my site resources and had font-awesome working in every browser known to man except IE8 (on Win XP). This was displaying the symptoms described here; the icons only displayed when hovered.

I tried to trigger a mouseover event but this had no effect.

My solution was to have a callback that fired once the DOM was ready and then lazy load font-awesome.css. This was a surprise to me because I always follow best practise of placing my JavaScript code just before the closing body tag. All DOM elements should, in theory, be ready at this time but ... well, you learn something new every day.

Awesome! Great project by the way. Helps me avoid loading heavier sprite files and with my fluid designs as we move into the responsive web era. You could probably drop a few icons in favour of some others but that's another topic.

[davegandy]

Looks like there's a fix. Closing.

[LaCodeA]

I realize this is an old topic, but this is my answer:

I was having a similar issue where the font would not show up until I hovered over the parent element. I was able to fix this problem by triggering a focus event on the elements parent.

element.parent().trigger('focus');

Hope this helps someone!

[CodeBrauer]

having the same issue on chrome 33 on mac os - with the newest fontawesome version

[tagliala]

@GabrielWanzek that is another issue, take a look at #2763

[CodeBrauer]

@tagliala , oh thank you.

[ArwedSchmidt]

This seems to be an issue when stuff is loaded not in but right in front of the closing -Tag. I can confirm its still present in Win 7 / IE 8

[jeffsama]

@LaCodeA Thanks for your solution! You saved my day!

[borisjoffe]

One of the problems that I noticed with element.parent().trigger('focus'); is that if some elements are outside the current visible screen, it will cause scrolling and disrupt the user experience.

What worked for me was adding the following style within an IE8 conditional comment:

<!--[if IE 8 ]>
<style>
.hide-font:before,
.hide-font:after {
   content: none !important;
}
</style>
<![endif]-->

and then adding a function to the app's namespace to trigger fixing the icons

MYAPP.fixFonts = function () {
  if (MYAPP.browserIsIE8) {
    var $stuffToFix = $myApp.find("i.fa.optional-extra-classname");

    $stuffToFix.addClass("hide-font");

    setTimeout(function () {
      // removing the CSS class immediately after adding it didn't work
      // so I wrapped the removeClass in a setTimeout
      $stuffToFix.removeClass("hide-font");
    }, 10);
  }
};

and then I added the following code to any event handlers that displayed parts of the page that contained the icons:

$thing.on("click", function () {
  $partOfPage.show();

  MYAPP.fixFonts();
});

The code above is a mixture/variation of the answers here: http://stackoverflow.com/a/21262347/2350813 but it also accounts for web apps where the visibility of some sections of the app containing font awesome icons may be toggled depending on user interaction.

I initially tried disabling/enabling the style element itself but that didn't seem to work properly. Adding/removing a class to the font icons worked much better.

[tagliala]

locking here, please refer to #954