CODEWITHSUNDEEP
internet-explorer-8font-awesome
BaronGrivet
BaronGrivet

Reputation: 4424

Font Awesome not appearing in Internet Explorer 8

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:

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?

Upvotes: 15

Views: 37646

Answers (6)

bheru mehta
bheru mehta

Reputation: 1

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

Upvotes: 0

awl19
awl19

Reputation: 368

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.

Upvotes: 9

Web Designer cum Promoter
Web Designer cum Promoter

Reputation: 1336

  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

Upvotes: 0

prodigerati
prodigerati

Reputation: 607

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...

Upvotes: 2

Christof
Christof

Reputation: 3927

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.

Upvotes: 2

BaronGrivet
BaronGrivet

Reputation: 4424

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>

Upvotes: 18

Related Questions