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

http://www25.myfantasyleague.com/2015/home/61094?MODULE=MESSAGE14

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>

Answers


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 'http://leaguedraftfantasysports.com' 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://www25.myfantasyleague.com' 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

Search




Leave an answer