Font awesome and ie7 issues

2019-09-01 18:31发布

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 font awesome website - I have had a look at what's different and I cant see anything out of th ordinary. I've followed the instructions and added the css in order etc...

I'm not using less. Here is a link to my test site https://googledrive.com/host/0B8UWGEiox1HOZnV6ZTA3bzNvMTA/testsite.html

The test site show font awesome using ie tester however that isnt 100% accurate. I am using true ie7 to test on and the font is simply squares.

Please can anybody see what's going on here as I'm at an end with it!

<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/main.css" rel="stylesheet" media="screen">
<!--[if lt IE 8]>
    <link href="css/main-ie7.css" rel="stylesheet">
<![endif]-->

<link rel="stylesheet" href="css/font-awesome.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
<![endif]-->

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

</head>

3条回答
做自己的国王
2楼-- · 2019-09-01 19:14

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/

查看更多
Emotional °昔
3楼-- · 2019-09-01 19:15

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.

查看更多
一纸荒年 Trace。
4楼-- · 2019-09-01 19:16

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

查看更多
登录 后发表回答