Skip to content Skip to sidebar Skip to footer
Home / Css / Fonts / Html / Internet Explorer / Twitter Bootstrap

Font Awesome And Ie7 Issues

Post a Comment
I'm using bootstrap 3 and have to support ie7. Ideally I would like to use font for icons. They work great in all other browsers except ie7 :( The icons appear fine using ie on the

Solution 1:

Font Awesome version 4.0.1 does not support IE7, see the bottom of their getting started page: http://fortawesome.github.io/Font-Awesome/get-started/

Version 3.2.1 has support, see their IE7 section at the bottom of their 3.2.1 getting page http://fortawesome.github.io/Font-Awesome/3.2.1/get-started/

There is an app called Icomoon that can create custom icon fonts, and can include icons from Font Awesome. Their old version of the application generates a Javascript file for IE7 that will allow the icon fonts to be used, the old version of the app is here http://icomoon.io/app-old/

Solution 2:

Perhaps the charset is assumed wrongly. Try including <meta charset="utf-8"> in the <head>.

Solution 3:

If your icons are not intented to change at runtime, you can use the following CSS to add support for IE6 and IE7 for whatever icons you need :

.icon-glass {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf000;');
}

If your icons are intended to change at runtime, you could do something like this instead :

.icon-glass {
  *top: expression(0, this.innerHTML = '&#xf000;');
}

Unfortunately, this second approach is extremely slow. While it is likely to work in IE6 with a significant reduction of your performance, IE7 is likely to crash if you have too many icons on your page. So I wouldn't recommend this second technique unless you use only very few icons and you can afford the performance reduction.

Post a Comment for "Font Awesome And Ie7 Issues"