22

So I am using Font Awesome in a project and in testing I'm running into issues with IE8.

On Windows IE9, Chrome and Firefox show the font properly (As does Firefox, Chrome and Safari on OS X) but IE8 on Windows has a problem where I get a box in place of the font.

enter image description here

My code is:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <title>Site title</title>

    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link href=".../css/css.css" rel="stylesheet" type="text/css">
    <link href="../css/print.css" rel="stylesheet" type="text/css" media="print">

    <link href="../apple-touch-icon.png" rel="apple-touch-icon-precomposed">
    <link href="../css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css">
    <link href="../css/jquery-ui-overrider.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Michroma&subset=latin&v2" rel="stylesheet" type="text/css">
    <link href="../css/prettify.css" rel="stylesheet" type="text/css">
    <link href="../css/font-awesome.css" rel="stylesheet" type="text/css">
    <!--[if IE 7]>
        <link href="../css/font-awesome-ie7.css" rel="stylesheet">
    <![endif]-->

I have the four font files...

  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff

...where they belong and they are readable by the world (755 permissions). What am I missing? Do I have to do something with compatibility view in IE8?

The same computer views the fonts on the Font Awesome site just fine so it has to be something I'm doing wrong.

As requested, a copy of font-awesome.css is here: font-awesome.css. It is more or less what I downloaded from them with the exception of the path to the font files.

Based on @Abody97 I added https://html5shim.googlecode.com/svn/trunk/html5.js into the mix (Code above has been updated). Still no luck, even after a refresh and a delete cache refresh.

Rob
  • 1,407
  • 2
  • 15
  • 22
Jason
  • 15,017
  • 23
  • 85
  • 116
  • Can we see the content of `font-awesome.css`? The problem is most likely there... Also, IE8 will be using the `eot` file, whereas ie9 probably uses the `woff`. my guess would be that the css file has the wrong path for the eot or something similar. – Nico Burns Aug 26 '12 at 13:03
  • @Nico Burns - I updated the post to include a link to a copy of the .css file – Jason Aug 26 '12 at 13:12
  • Are you sure encoding is set to UTF-8 in your browser? – Chris Aug 26 '12 at 13:17
  • @Abody97 - I can't say for sure I have that set. Is that something I set in IE8? (Can't say I've ever done that before) I was under the impression did that for me... – Jason Aug 26 '12 at 13:21
  • @Jason It's usually in the `Page` menu -> `Encoding`. It's set to UTF-8 by default, but it can't hurt to be extra sure. – Chris Aug 26 '12 at 13:31
  • @Abody97 - Yep, mine is set to "Unicode (UTF-8)" - same problem. – Jason Aug 26 '12 at 13:34
  • did you find these four files separetly, or did you generate them with something like www.fontsquirrel.com? Perhaps the .eot is incomplete and misses the character you try to use, while the .woff doesn't. – Pevara Aug 26 '12 at 13:43
  • @PeterVR - I got the four font files from http://fortawesome.github.com/Font-Awesome/ – Jason Aug 26 '12 at 13:52
  • @Jason I have the same problem ! When you see that "Unicode (UTF-8)" is selected and click on it, it solve the problem (once, have to do this everytime). I'm looking for a solution to this... – Apolo Apr 22 '14 at 15:17

10 Answers10

14

I had the same problem and found a solution, I'll post it here in case anyone still needs it.

The problem was that IE failed to load the font files, it was constructing weird GET requests that returned 404 errors.

Using the trick found here: http://www.fontspring.com/blog/fixing-ie9-font-face-problems I was able to fix the issue.

Add ?#iefix to the eot url in the CSS that contains the font-face (in this case font-awesome.css)

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
rolegio
  • 141
  • 1
  • 3
  • Another issue is to reference the path using HTTP: or HTTPS: ... @fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts" works if you remove http: or https: – Nigel Sheridan-Smith Mar 05 '16 at 04:45
11

This appears to be a really common issue and according to this discussion has to do with the character being attached using :before. I actually found the easiest way to get it working in IE 8 is to not use the fa-name class and insert the character manually.

e.g. Instead of:

<i class="fa fa-user fa-lg"></i>

use:

<i class="fa fa-lg">&#xf007;</i>

The character codes can be found on the Font Awesome Cheatsheet. This seems to work all the time, no matter what IE version.

Hope this helps someone,

Jason

Jason
  • 2,455
  • 4
  • 37
  • 48
6

Try adding this to your head before including CSS:

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Chris
  • 26,544
  • 5
  • 58
  • 71
  • I just tried that (Check my code change above) with no luck. The only difference is I used https://html5shim.googlecode.com/svn/trunk/html5.js since I need it to be https traffic only. – Jason Aug 26 '12 at 13:56
  • @Jason Can you please provide a live link to your site? This is really weird. – Chris Aug 26 '12 at 13:58
  • 1
    Unfortunately I can't - it's not public. I feel like I am missing something really basic since I get the fonts when I visit the Font Awesome site in IE8. – Jason Aug 26 '12 at 14:05
  • @Jason Are you sure you're not using compatibility view? – Chris Aug 26 '12 at 14:08
  • Yes, Tools -> Compatibility View is unchecked and my site is not listed in the Compatibility View list under Compatibility View Settings. – Jason Aug 26 '12 at 14:13
  • Are you sure the fonts' relative path is correct? I understand they're under `http://www.reljac.com/font/`, but maybe the relative path to the page is wrong? It could be that it's working on other browsers because they cached the font from the main Font Awesome site. – Chris Aug 26 '12 at 14:17
  • Based on this .css file (http://reljac.com/so_1/font-awesome.css) I have the fonts at http://reljac.com/insite_core/font/ (They are not really there as the site is not public but I use that site as a place to post examples, etc.. So, the fonts' path is correct. – Jason Aug 26 '12 at 14:25
  • Well, then I don't know what the issue can be. IE8 seems to use those "rectangles" when the font isn't loaded correctly. It **could** also be some system-wide issue, because as far as I know IE8 uses the same Unicode settings as Windows'. Try rendering the page on another computer. Sorry I couldn't be of more help -- a live demo would've made stuff much clearer! – Chris Aug 26 '12 at 14:29
  • Worked for me. Removed the squares that replaced the icons in IE8. – Kevin Zych Feb 06 '13 at 23:08
  • 2
    @Abody97 I suggest changing removing the http: part so that this code will not give security warnings when this is loaded from a https page. "" – Kevin Zych Mar 20 '13 at 15:57
  • 5
    Better yet, I suggest that everyone downloads a release version of html5.js source and includes this file instead of always pulling from the trunk. https://code.google.com/p/html5shim/ – Kevin Zych Mar 20 '13 at 16:01
4

just had the same problem and solved it by setting the IE8 "security level" to something below "High".

In general, I could reproduce the "boxes" by making the font files (eot, woff, ttf...) "not available" (e.g. resulting in a 404 response) - so I assume, on securiy level "High" they're just not loaded...

mr_x_hacker
  • 41
  • 1
3

It turns out that there was an extra <html> tag being generated by an included file that was the source of my problems. So, in my final file I had both <html lang="en"> AND <html> The extra <html> tag was throwing IE into quirks mode which cause the font-awesome icon issue I was having.

Eliminating that rogue <html> and verifying my headers were set correctly fixed everything for me.

I am now using a boilerplate set of header tags on all pages:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />

Before I had this on one page:

<!DOCTYPE html>
<html lang="en">
<html>  <!-- This tag was causing the problem, removing it solved things for me -->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />
Jason
  • 15,017
  • 23
  • 85
  • 116
1

Making Cache control in the response header as private for the font file worked perfectly in IE8 for me. More explanation on this can be found here - where he explains how he solved for PDF files (Can't display PDF from HTTPS in IE 8 (on 64-bit Vista)).

Hope this helps.

Community
  • 1
  • 1
Mano
  • 2,110
  • 2
  • 15
  • 14
1

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>
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
1

IE under 9 version not support woff file format. Probably that is answer why you can't get them on IE8

Przemysław Kaczmarczyk
  • 436
  • 3
  • 15
1

The only thing that worked for me was this:

https://github.com/FortAwesome/Font-Awesome/issues/2324

Combined with the other answer from Jason: e.g. Instead of:

<i class="fa fa-user fa-lg"></i>

use:

<i class="fa fa-lg">&#xf007;</i>
Richard Marskell - Drackir
  • 13,080
  • 3
  • 33
  • 54
Lucidize
  • 283
  • 3
  • 10
-3

It is not only IE, all the browsers have the same issue.

The funny thing is you need to put your files in the right location.

This means you need the below structure:

folder levels look like this:

    level 1                 level 2  level 3

----index.html 

----font-awesome-4.2.0  ----css ---- fontawesome.css

                        ----css ---- fontawesome.min.css 

                        ----fonts----... 

                                 ----... 

                        ----...

and then put the link sylte in your index.html as

<link rel="stylesheet" href="./font-awesome.min.css"> in between head

a very important note is: DO NOT try to COMBINE fontawesome folder and any other folder. Keep them separate.

now test it, and everything is good to go.

Euler
  • 335
  • 2
  • 5
  • 14