CODEWITHSUNDEEP
internet-explorergoogle-chromefirefoxfontsfont-awesome
Mohammad Abu Hashim
Mohammad Abu Hashim

Reputation: 29

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

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;
}

Upvotes: 2

Views: 4056

Answers (3)

Brent Washburne
Brent Washburne

Reputation: 13158

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

Upvotes: 1

StuckOverflow
StuckOverflow

Reputation: 1011

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.

Upvotes: 1

Josh Goodwin
Josh Goodwin

Reputation: 311

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 &.

Upvotes: 0

Related Questions