Font Awesome: Works on mobile, but not on PC. Solutions?

[dakshshah]

Over at my blog, The Daksh Shah Blog (http://daksh.me), I use Font Awesome for all my icon needs. To my surprise, they suddenly stopped appearing correctly a few days back. They’re perfect on mobile devices but just show up as blank squares on PC (Chrome & Firefox). I implement Font Awesome by putting the following line before the closing head tag in my header.php file (And yes, I use WordPress):

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

Example 1 (PC; Notice the blank squares beside the date, author name and post tags): http://i.gyazo.com/ca3708e5b74df482f429eb2993540e9c.png
Example 2 (PC): http://i.gyazo.com/9d8791378ec1b3ca151b2f545124d24d.png

Example 1 (iOS): http://i.gyazo.com/ee7bc980d27d91bb553228493de1da4e.png
Example 2 (iOS): http://i.gyazo.com/edf38aac61f791bc177f8a51098c9b97.png

[Senff]

I’ve checked this on Chrome, Firefox and IE on Windows, and I see the icons without problems. I don’t see the squares.

[dakshshah]

Hey Senff! Thanks for the help.

Do you have any idea why this might be happening? This is so confusing.

[Ilan Firsov]

Maybe a cache problem? if your browser cached an old version of the fonts which doesn’t include the icons you used you will see the squares. Try deleting browser cache and see if it solves the problem

[Jimmy]

I’d also double check that you don’t have some sort of ad-blocker running on your PC which is stopping the icons from loading. Often this can be the case as blockers will sometimes look for particular keywords in the code and respond accordingly.

[Author]

Posts