0

Font Awesome social icons not showing up in IE, Chrome and Firefox, fortunately it works fine in Safari, anybody had faced like this issue before?

And below is my CSS, I don't want to use CDN.

@font-face {
   font-family: 'FontAwesome';
   src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
   src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
}
Stickers
  • 75,527
  • 23
  • 147
  • 186
Abilash
  • 221
  • 1
  • 2
  • 9

1 Answers1

0

Check the dev console to see if it's returning an error. Might even be an issue with permissions even if you're running it locally.

Also try updating to Version 4.4.0 which is the latest. There may have been an issue with 4.2.0.

AndrewHipp
  • 379
  • 2
  • 6
  • error in console: Font from origin 'http://demandware.edgesuite.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.wen.com' is therefore not allowed access. – Abilash Jul 29 '15 at 21:41
  • Ah, so the issue is you're trying to access a resource that's limited on who can access it. 'demandware.edgesuite.net' won't let you load it since you're accessing it from somewhere other than 'demandware.edgesuite.net' More reading: http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work – AndrewHipp Jul 29 '15 at 21:44
  • Then how safari shows up the social icons, if its a access-control-allow-origin issue – Abilash Jul 30 '15 at 20:48
  • I believe it's up to the browser to listen to the `access-control-allow-origin`. So some browsers might ignore it. – AndrewHipp Jul 30 '15 at 23:05