Why font-awesome does not work on web and work in localhost?

Question

Why font-awesome works on localhost but not on web ?

Help Please!!

@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot@v=3.0.1');
  src: url('font/fontawesome-webfont.eot@#iefix&v=3.0.1') format('embedded-opentype'),
    url('font/fontawesome-webfont.woff@v=3.0.1') format('woff'),
    url('font/fontawesome-webfont.ttf@v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Have you check the case in file names, Linux is case sensitive. — Peter Wooster, May 11 '13 at 12:14

score 1 · Answer 1 · answered Jun 28 '13 at 04:13

I found the fix to this issue from here: It was answered by someone named Thorst about halfway down the page.

Saved me a ton of frustration!

In case the link goes stale->

change font-awesome.css

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');

*Note: the format for the eot is what was changed.

score 1 · Answer 2 · edited May 23 '17 at 12:30

If your font-awesome files are on a different server than your web page, you may be getting a CORS (Cross-Origin Resource Sharing) error in your browser. You can either use the MaxCDN server or modify your server (that provides the font-awesome files) to include a Access-Control-Allow-Origin:* header with the font files. See my answer for Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

score 0 · Answer 3 · answered May 11 '13 at 12:27

I've never seen the use of @ signs like that. Try using question marks in their place:

@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot?v=3.0.1');
  src: url('font/fontawesome-webfont.eot?v=3.0.1#iefix') format('embedded-opentype'),
    url('font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

On line 4, I've also also swapped the order of #iefix and v=3.0.1, and removed the &.

Why font-awesome does not work on web and work in localhost?

3 Answers3