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>
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/
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 :
If your icons are intended to change at runtime, you could do something like this instead :
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.
Perhaps the charset is assumed wrongly. Try including
<meta charset="utf-8">
in the<head>
.