CODEWITHSUNDEEP
cssgoogle-chromesafaricross-domainfont-awesome
Amous
Amous

Reputation: 514

Font-awesome not displaying properly in Chrome

My fonts-awesome fonts are working in Chrome (Version 51.0.2704.103), but not working in Safari (Version 9.1).

When accessing my application on Chrome I receive this error and the icons don’t display properly

Font from origin 'http://[::1]' 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://localhost' is 
therefore not allowed access.

However, on Safari I don’t get this error and the fonts load fine.

I have not tampered with the font-awesome code and the version I installed from npm is 4.6.3.

I have searched around online and people have mentioned things about modifying to the .htaccess file, changing the font paths in the font-awesome.css file, turning off ad block and attempts to get around the same-origin policy. However, these don’t seem to work for me. The thing that is puzzling me is why is everything working properly in Safari, but failing in Chrome? Any insight to this would be helpful.

Upvotes: 1

Views: 3342

Answers (2)

dippas
dippas

Reputation: 60543

try either 2 things:

1.use this CDN:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

2.download font-awesome.css to your local , and then link it from there, something like this:

<link href="/my-fonts/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

Upvotes: 2

Anthony Astige
Anthony Astige

Reputation: 1969

Make your local webserver send the following header when serving up the font

Access-Control-Allow-Origin: *

Reference

https://davidwalsh.name/cdn-fonts

Upvotes: 0

Related Questions