Icons don't show up in IE8

[ghost]

Hi,

are there any known issues with IE8? The Icons I've used display in every modern Browser, but not in IE8. Here's the code I've used:

CSS:

@font-face { font-family: 'FontAwesome'; src: url('./fonts/fontawesome-webfont.eot'); src: url('./fonts/fontawesome-webfont.eot?#iefix') format('eot'), url('./fonts/fontawesome-webfont.woff') format('woff'), url('./fonts/fontawesome-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
[class^="icon-"], [class_=" icon-"] { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; display: inline; width: auto; height: auto; line-height: normal; vertical-align: baseline; background-image: none !important; background-position: 0% 0%; background-repeat: repeat; }
[class^="icon-"]:before, [class_=" icon-"]:before { text-decoration: inherit; display: inline-block; speak: none; }
a [class^="icon-"], a [class*=" icon-"] { display: inline-block; }
.icon-search:before { content: "\f002"; }
.icon-twitter:before { content: "\f099"; }
.icon-facebook:before { content: "\f09a"; }
.icon-reorder:before { content: "\f0c9"; }
.icon-pinterest:before { content: "\f0d2"; }
.icon-google-plus:before { content: "\f0d5"; }
.icon-envelope-alt:before { content: "\f0e0"; }
.icon-linkedin:before { content: "\f0e1"; }

Implementation:

< a href="#">< i class="icon-facebook">< /a >
< a href="#">< i class="icon-twitter">< /a >
< a href="#">< i class="icon-google-plus">< /a >
< a href="#">< i class="icon-pinterest">< /a >
< a href="#">< i class="icon-linkedin">< /a >

Looks fine for me and I have no idea what the problem is.... :-(

The stylesheet loads before several scripts like jQuery and Modernizr.

Any idea what the problem could be?

Regards
Michael

[zachabernathy]

If that's your exact code, you may try closing your < i > tag ( < /i > )

<a href="#"><i class="icon-facebook"></i></a>
<a href="#"><i class="icon-twitter"></i></a>
<a href="#"><i class="icon-google-plus"></i></a>
<a href="#"><i class="icon-pinterest"></i></a>
<a href="#"><i class="icon-linkedin"></i></a>

[ghost]

Thanks for your reply. No - that wasn't my exact code. I left the tags open because otherwise the code was not displayed here.

This is really a strange issue. In IE9+ and Webkit Browsers everything is fine. But in IE8 the icons just don't show up. I tried already every solution I found on the web. First I thought it is because of the html5shiv script (this is a known issue), which is included in modernizr but the stylesheet loads before everything else, so that can't be the problem. :-(

[zachabernathy]

I see. Have you tried just removing any javascripts from the page (modernizr, jquery, etc.) and saved it just to double check it's not a script stripping it out? Just because you have the stylesheet loading before everything else, doesn't mean the following javascript calls won't strip it out.

[ghost]

Yes I tried that but unforunately that does not solve the problem. :-( In IE9+ everything is fine....

[zachabernathy]

If it were me, I would create a brand new static html page, and start from scratch with a brand new blank clean slate (assuming you're not already doing so) and if it still didn't work, I would find someone else with IE8 and test it in their environment to make sure mine wasn't jacked up.

[ghost]

Seems like I have to do that. Hoped that this issue was already known.

[davegandy]

IE8 is supported just fine. Here's a screenshot I just took of the latest:

If you need specific help for your issue, I recommend Stack Overflow. I'm trying to clean up the issues to be actual support issues.

[errm]

This is an issue, if the page is cached, and loaded without the mouse over the window (read hit the refresh button or load something in an iframe) then the page gets rendered before the font loads.

There is some SO on this issue http://stackoverflow.com/questions/9809351/ie8-css-font-face-fonts-only-working-for-before-content-on-over-and-sometimes

I have only managed to fix with javascript, but it seems to be quite tricky…

[ghost]

Thanks - good to know that I'm not the only one with strange issues in IE8! :-)

I will try your solution asap.

[bingyalengxuan]

is there any solution to fix this problem

[tagliala]

locking here, please refer to #954