分类

标签

菜单

Awesome在IE8(Internet Explorer 8)不显示的解决办法

2014-11-23 时间: 06:45
 

up vote 8 down vote favorite

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:

  • 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?

share|improve this question
 

5 Answers

up vote 14 down vote accepted

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>
share|improve this answer
 
1  
This fixed it for me in IE7 but not 8. –  Synchro Mar 6 ’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 stackoverflow.com/questions/9809351/…. –  leesei Apr 23 ’13 at 17:38
 

up vote 2 down vote

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…

share|improve this answer
 

up vote 2 down vote

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

share|improve this answer
 

up vote 1 down vote

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.

share|improve this answer
 

up vote 0 down vote
  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

aaa

 
up vote 4 down vote favorite

7

Why does this fontface render in IE8:

@font-face {
  font-family: 'Aller';
  src: url('aller_rg-webfont.eot');
  src: url('aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
       url('aller_rg-webfont.woff') format('woff'),
       url('aller_rg-webfont.ttf') format('truetype'),
       url('aller_rg-webfont.svg#AllerRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

And this does not:

@font-face {
  font-family: 'Champagne';
  src: url('champreg-webfont.eot');
  src: url('champreg-webfont.eot?#iefix') format('embedded-opentype'),
       url('champreg-webfont.woff') format('woff'),
       url('champreg-webfont.ttf') format('truetype'),
       url('champreg-webfont.svg#Champagne&LimousinesRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

I really can’t figure it out. All other browsers work fine, obviously.

share|improve this question
 

3 Answers

up vote 27 down vote accepted

Try creating a new .eot file with one of the others using an online woff/ttf/svg to eot convertor.

If this new file doesn’t work, then it might be a problem with the font itself. Sometimes IE6-8 has a fit if the Fontname and Family Name are not the same within the actual font file. To fix it:

  • You’ll need to download FontForge
  • Open up the font
  • From the menu, choose Element > Font Info
  • Ensure the Fontname, Family Name and Name for Humans are all the same
  • Save the font as a TTF or OTF and use an online convertor to spit out an EOT file.

Every issue I’ve had with font-face – if the CSS was correct – worked with one of the above two solutions, so good luck 🙂 Maybe even try saving the font without any changes in FontForge and converting that online before you fiddle with the name properties.

share|improve this answer
 
1  
Wow…renaming the font info via FontForge actually worked! Learnt something today, thank you Patrick –  djwd Sep 17 ’12 at 17:00
    
font2web.com worked for me. Thanks Patrick! –  David Jun 24 ’13 at 16:55
1  
This not only solved my IE9 problem (it was working, but logging an error in the console), but it also got it working for IE8. A hug thanks! –  Chris Jul 31 ’13 at 8:44
1  
it’s working in interner explorer 7,8,9…… thank’s a lot –  Pragnesh Mca Aug 8 ’13 at 7:00
1  
I also ran into this very same problem, I compiled the fixed EOT file and shared it here: gist.github.com/vjt/7436066. I hope this saves someone the very bad time I spent fighting with FontForge on Windows. –  vjt Nov 12 ’13 at 18:26
 

up vote 0 down vote
  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… by sivakumar

share|improve this answer
 

up vote 0 down vote

Under IIS (MVC environment) I had to add the following rule to my Web.config:

   <system.web>
    <httpHandlers>
      <add verb="GET" path="*.eot" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.svg" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.ttf" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.woff" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.otf" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>

留言

你必须才能发表评论。

移动 桌面