css - Zurb Foundation 图标在网站首次加载时未加载；解决是否单击链接

Question

我已经在我的服务器上安装了 Zurb Foundation 图标，并将适当的 CSS 声明包含在头部，作为第一个在所有其他样式表之前加载的样式表。

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

最初加载网站时，图标不显示。取而代之的是，每个图标的位置都会显示一个包含 4 个字符的框:

如果我点击我网站上的一个链接到另一个内部页面，图标将正确显示(包括当我返回主页时):

无论浏览器如何，都会发生这种情况。我需要做什么才能让它们在初始页面加载时显示？

这是我使用的代码:

<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

您没有发布任何代码，但当您忘记将 general、social 或 gen-enclosed 等类添加到 html 元素上的 foundicon 类时，通常会发生此错误

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

否则这里的东西可能对你有帮助

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