15

We have recently developed a website with a strong reliance on Font Awesome as part of it's design. We're using the standard implementation with before:content and their supplied CSS.

For some reason Font Awesome isn't displaying in IE8. I've spent quite a few hours troubleshooting and trying various fixes, with no luck.

I have:

  • Set the mimetype of EOT to application/vnd.ms-fontobject
  • Set the mimetype of OTF, TTF to application/octet-stream
  • Executed HTML5Shiv after all CSS has been loaded.
  • Various attempts to reload the CSS or DOM on page load

Here is the website: http://www.tetakere.org.nz - the Hotlinks box is a good example of Font Awesome

Has anyone got any ideas on other approaches to getting this website to display Font Awesome?

BaronGrivet
  • 4,364
  • 5
  • 37
  • 52

6 Answers6

18

After some painful troubleshooting I finally worked it out.

The solution was to move the loading of HTML5Shiv from the <head> section to just before the </body> tag.

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</body>
BaronGrivet
  • 4,364
  • 5
  • 37
  • 52
  • 1
    This fixed it for me in IE7 but not 8. – Synchro Mar 06 '13 at 11:16
  • 1
    It may be related to content rendering before the font load. I also put `html5-shiv` AFTER FontAwesome to solve this issue. See http://stackoverflow.com/questions/9809351/ie8-css-font-face-fonts-only-working-for-before-content-on-over-and-sometimes. – leesei Apr 23 '13 at 17:38
9

I know this is an older question, but I had lots of trouble with this issue and none of these answers helped except the last one.

Changed the head...

What worked for me was:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

This also worked (last answer I referred to):

<meta http-equiv="X-UA-Compatible" content="IE=8">

Also, I read (Force IE compatibility mode off using tags) that you should put that meta tag above all other meta tags and before any conditional IE statements; otherwise the meta tag will be invalidated.

Community
  • 1
  • 1
awl19
  • 366
  • 4
  • 10
2

I did not need html5shiv to get FontAwesome to work in IE8. This answer (re-creating the .eot file and replacing the old one) solved my problem.

Community
  • 1
  • 1
Christof
  • 3,777
  • 4
  • 37
  • 49
2

I tried everything from modifying my apache config, and .htaccess files with no luck. In the IE development tools I stumbled upon "Document Mode" and the default was IE7. So after some research I found this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=9">

Now IE 10, and 9 format my website correctly and display all Font Awesome icons correctly.

If you still want IE 8 compat then you could start with this:

<meta http-equiv="X-UA-Compatible" content="IE=8">

Hope that helps...

prodigerati
  • 597
  • 8
  • 26
0
  1. Added this to htaccess. "BrowserMatch MSIE best-standards-support Header set X-UA-Compatible IE=8 env=best-standards-support"
  2. trying to reconvert eot font
  3. doc compactibility mode chnage
  4. tried usleep function
  5. setInterval js
  6. add google html5 script
  7. call css in body part for ie8
  8. add data-icon class
  9. ad pseudo elements js
  10. add png & svg filters in css
  11. check font type Permission in server

but finally works when added

.sass and .less css

files

happy coding

Web Designer cum Promoter
  • 1,334
  • 14
  • 26
0

If you are using IE8, it's necessary to add the html5.js script like:

<!--[if lt IE 9]>
  <script     src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

It works for me I am sure it will work. Reference links https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#internet-explorer-compatibility-mode

bheru mehta
  • 1
  • 3