MShack February 2016

Font Awesome only displaying on mobile

I have font awesome installed , did everything right....i think.

on my ipad and iphone, i see all the icons displaying , but on my desktop in FF , Chrome and IE , nothing is showing aside of a box where the icons should display

Any ideas what might cause this ?

I have all files loaded and linked

<link rel='stylesheet' id='fontawesome-css'  href='/assets/fonts/fontawesome/font-awesome.css?ver=3.9.3' type='text/css' media='all' />

and am displaying in my HTML like so

<div class="alignleft"><i class="fa fontawesome-icon fa-refresh circle-no icons" style="font-size:48px;margin-right:24px;color:#1a7bfe;"></i></div>


sokkyoku February 2016

You have a Cross-Origin resource policy conflict, which you can see by checking your browsers console when you visit your page:

Font from origin '' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.

Because of this your font is simply not loaded. Not sure why this didn't happen during your mobile testing.

As a general rule, if you're having surprising behaviour on a website, check your console.

Post Status

Asked in February 2016
Viewed 3,147 times
Voted 6
Answered 1 times


Leave an answer