Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font Awesome icon not showing on IE7

Font Awesome icons are not showing on IE7. They do on IE8, IE9, FF and Chrome.

Example HTML:

<span rel="tooltip" data-placement="top" data-original-title="Click to add question to favorites">
    <i class="icon-star-empty"></i>
</span>

Files included:

<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/font-awesome.css" rel="stylesheet">
<link href="/css/font-awesome-ie7.css">

Request to .woff:

Request: 
URL:http://example.com/font/fontawesome-webfont.woff

Response:
Accept-Ranges:bytes 
Connection:Keep-Alive 
Content-Length:41752
Content-Type:application/octet-stream 
Date:Tue, 11 Dec 2012 11:31:51 GMT 
ETag:"4095e-a318-4cf1d75fb20dd" 
Keep-Alive:timeout=5, max=98
Last-Modified:Thu, 22 Nov 2012 23:02:27 GMT Server:Apache/2.2.22 (Ubuntu)

I've configured this on Apache's /etc/apache2/mods-enabled/mime.conf (and restarted Apache):

AddType application/octet-stream .woff

Am I missing any configuration?

like image 521
martincho Avatar asked Dec 11 '12 11:12

martincho


3 Answers

Quick update to this thread.

FontAwesome no longer supports IE7, but if you're in the unfortunate situation where you need to support it because you need to support proprietary software, whos name I shall not mention, that includes it as its only browser, and refuses to upgrade even though, at the time of this post, IE8 has been out for nearly 4 years and we are now on IE11, then do as I did:

  1. Download the ie7.min.css file and add the section as indicated in the answer above:

  2. Open the ie7.min.css file and change all the ".icon-" to ".fa-", since FontAwesome has changed its naming conventions.

This will get you support on about 95% of the icons for the FA 4.0.3 (newly introduced fonts won't be supported on the old ie7.min.css file.

like image 173
David Glass Avatar answered Oct 06 '22 22:10

David Glass


Better use the IE7 conditional comment, so the file gets loaded in IE7 only. (taken from the Fontawesome example)

<link rel="stylesheet" media="all" href="assets/css/your-icons.css" />
<!--[if IE 7]>
<link rel="stylesheet" media="all" href="assets/css/your-icons-ie7.min.css" />
<![endif]-->
like image 43
Erik Pöhler Avatar answered Oct 06 '22 22:10

Erik Pöhler


The configuration was correct after all. For some reason font-awesome-ie7.css wasn't loading correctly. After making sure that this file was loading, everything worked.

like image 34
martincho Avatar answered Oct 06 '22 23:10

martincho