font-awesome not working on IE9?

Question

I have below

<i class="icon-remove"></i>

which displays the close icon correctly on firefox,chrome,IE 8 but not on IE9.

Here is font-awesome.css

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), 
         url('webfont.woff') format('woff'), 
         url('webfont.ttf')  format('truetype'), 
         url('webfont.svg#svgFontName') format('svg'); 
    }

Weird thing is that it works on one client system with exactly same version of IE9 and windows 7 OS, but not on other. Using tomcat as webserver.

Any help/suggestions whats happening here ?

Anaplastic

Is your problem solved now? – Miltie

Answer 1

try this, make sure you have awesome linked.

<i class="fa fa-times"></i>

Usually with fontawesome for the class you put the fa class first then the name of the icon like for example fa-times.

Im not sure if icon-remove is in FontAwesome library. But if it is, it might be something like

<i class="fa fa-icon-remove"></i>

give it a try, not sure if its the answer but, something to take note.

Delibes

Answer 2

It seems to be a link problem. Please check whether FontAwesome is well linked.

Then, check whether the version of css is running that class. For example, upon a search, the remove icon class is stated a bit different (see http://fontawesome.io/3.2.1/icon/remove-sign/).

If other browsers work, clean their cache first to be sure they are not loading an older version you had.

Hope it will help you :)

Austro

Answer 3

IE will use the last "src: url", and doesn't understand multiple arguments due to a regex bug with spaces becoming %20. try this:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: local('webfont.woff'),
         url('webfont.woff') format('woff'), 
         url('webfont.ttf')  format('truetype'), 
         url('webfont.svg#svgFontName') format('svg');
}

(source: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)

Hypoacidity

Answer 4

I suggest you check this comment posted by #thorst in a Github thread. It could give you some insight on your problem. According to the reference.

the font-awesome.css was changed:

From

src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');

To

src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');

The Github Thread Reference

Genoa