Zurb Foundation icons not loading when site first loads; Resolves if a link is clicked

Question

I've installed the Zurb Foundation icons on my server and included the appropriate CSS declaration to the head as the first stylesheet to load before all others.

<meta name="description=" content="<?php echo $meta_description; ?>">
<link rel="stylesheet" href="foundation-icons/foundation-icons.css" />

When the site loads initially, the icons do not show. Instead, a box with 4 characters is presented in each icon's place:

If I click one of the links on my site to another internal page, the icons will then present properly (including when I go back to the home page):

This is happening regardless of browser. What do I need to do to make them show on initial page load?

Here is the code that I am using:

<ul>
<li><a href="#"><i class="fi-social-facebook"></i></a></li>
<li><a href="#"><i class="fi-social-linkedin"></i></a></li>
<li><a href="#"><i class="fi-social-twitter"></i></a></li>
<li><a href="#"><i class="fi-social-google-plus"></i></a></li>
</ul>

Answer 1

You didn't post any code but often this error happens when you forget to add the general, or social, or gen-enclosed etc class to the foundicon class on your html element

<i class="general foundicon-heart"><p>heart</p></i> 
<i class="social foundicon-twitter"><p>twitter</p></i>

Otherwise something here might help you

https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting