Vanishing Font Awesome icons. Fix?

Classic
1

Hi

Just uploaded a new site - www.context-associates.com - and everything worked as it should, apart from Font Awesome icons. They appear in the footer of the home page (phone, Skype and email icons), as intended, but disappear from the footers of the other pages (plus a few other places). Any explanation why? And, more importantly, how to fix the problem? I’m using the Joe Workman stack in the Freestack Responsive Theme.

Thanks for any advice.

Keith

2

Hi Keith,

Add the following code into the head area on your site pages. You’ll be good to go then.

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

Best,
Charlie

3

Have you tried turning Consolidate CSS on? I had the same issue and this fixed it.

4

Adding another instance of font awesome is not the best solution to the problem. Now you are loading Font Awesome twice on your webpages and that is a really quick way to slow down your webpage. If you remove the second loading of Font Awesome, I would be happy to find the real issue and help fix it.

5

Are you using any ad blocking software?
I’ve seen it reported that font awesome icons such as Twitter, Facebook, G+ etc can get blocked as the ad blocking software interperstes them as unwanted ad’s.

6

@joeworkman I second this. The more scripts/resources you have loading the slower your web page will be.

@KeithC e these icons placed in the footer area (Site Setup), or on each page manually?

7

Hi Guys,

I provided the quick fix that I did because there were no calls for fontawesome showing in the home page’s source code when I looked at it initially. The solution I offered quickly resolved his display issue and got his site displaying the icons correctly.

I definitely agree about not having multiple fontawesome calls being made. As far as I can tell there is still only a single call to fontawesome being made on the home page. I have not seen anyone else offer a solution to fix his problem so not sure why the negative comments about multiple calls have been made when only a single call is being used that I can see in the page’s source code.

Best,
Charlie

8

Hey Charlie,
No negative intent meant! Glad you were able to help Keith get the issue resolved. It’s a beautiful looking website!

9

@blueballdesign there was no malice meant at all. I am just trying to educate users.

10

Thanks everyone for their interest and views. I used the Bluebell design solution (always found Charlie very quick and pragmatic) and it worked, which is all that matters to me (!). Perhaps it does slow things down slightly by a millisecond or two but I can’t tell. But, even as a non-techie, still curious why the glitch originally happened.

Cheers

Keith

11

Hi Joe

I took a look at this one too and on the pages where FA was not showing I could not quickly locate the call to FA resources. I didn’t spend all that much time on it, but I presume you do know where it is|was because you categorised adding the call in the document head (which I was going to suggest too) as the ‘second’ call to FA.

Was the first call embedded in a CSS file someplace that isn’t quite as obvious? Or some other technique? If that first call wasn’t ‘working’, in the sense that the icons weren’t actually showing up, does that first, non-effective, call to FA actually count at all?

Wouldn’t it rather be that this first ‘faulty’ call to FA would be responsible for any slowdown as that call would presumably have to 4xx out? Not the second which, from reading the latest posts, seemed to successfully bring the FA resources into scope?

Sorry to ask so many questions! But if you feel like educating us it would be great to benefit from your knowledge/interpretation further.

Thanks.

12

@kryten I load FontAwesome via JavaScript asynchronously so that it does not pause page rendering while Font Awesome is loading. By loading it asynchronously, the page continues to load while FA downloads and its applied in the background.