Custom Font-Awesome + IE

Question

I custom with some of my icon Font Awesome.

When I use it in Chrome, it works fine, but not in IE.

Here is My CSS:

@font-face {
    font-family:'FontAwesome';
    src:url('/assets/font-awesome/fonts/FontAwesome.eot');
    src:url('/assets/font-awesome/fonts/FontAwesome.eot?#iefix') format('embedded-opentype'),
      url('/assets/font-awesome/fonts/FontAwesome.woff') format('woff'),
      url('/assets/font-awesome/fonts/FontAwesome.ttf') format('truetype'),
      url('/assets/font-awesome/fonts/FontAwesome.svg') format('svg');
    font-weight:normal;
    font-style:normal
}

Anybody can help me?

Answer 1

In IE (up to version 9) was a bug in the handling of the attribute src, all further attributes IE perceived as part of the URL, it tried to go and get 404.

Look at the third row, you can see there "#"? IE still considers part of the rest of the URL, but the URL now looks like this:

myfont-webfont.eot # ') format (' eot ') ... and so on ... format (' svg '

Here's a simple and beautiful trick.

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

or

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

Answer 2

I just only add one small thing: IE for Windows Phone (only for WP) does not support webfonts - Shame :(