Geek Answers Handbook

Font Awesome icon not showing on IE7

Font Amazing badges are not displayed on IE7. They work with IE8, IE9, FF and Chrome.

HTML example:

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

Attached Files:

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

Request for .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 configured this on Apache / etc / apache2 / mods-enabled / mime.conf (and restarted Apache):

 AddType application/octet-stream .woff

Am I missing any configuration?

+6
source share
4 answers

In the end, the configuration was correct. For some reason, the font-awesome-ie7.css did not load correctly. After making sure that this file is loading, everything works.

+1
source

Quick update to this thread.

FontAwesome no longer supports IE7, but if you are in an unsuccessful situation when you need to support it, because you need to support proprietary software, whose name I will not mention, including it as the only browser and refuses although IE8 was absent during this post almost 4 years, and now we are on IE11 and then doing the same thing as me:

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

  • Open the ie7.min.css file and change everything from .icon- to .fa- because FontAwesome has changed its naming convention.

This will help you maintain approximately 95% of the icons for FA 4.0.3 (recently introduced fonts will not be supported in the old ie7.min.css file.

+16
source

It’s better to use IE7 conditional comment, so the file is only loaded in IE7. (taken from 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]-->
+8
source

There is a way to support IE7 even for new icons.

First download it as a base. https://gist.github.com/dorajistyle/7461853

Then, if the icon is missing, go to that icon in the list of icons. For example, a new white balance. http://fontawesome.io/icon/balance-scale/

There you will see that unicode char is f24e

Then add this to font-awesome-ie7.min.css at the end

 .fa-balance-scale { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf24e;'); }

Repeat for any icons you use.

0
source

More articles:


All Articles