Zurb Foundation 图标在网站首次加载时未加载；如果单击 link 则解决

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

您没有 post 任何代码，但当您忘记将通用、社交或 gen-enclosed 等 class 添加到 foundicon class 时，通常会发生此错误在你的 html 元素上

<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

Zurb Foundation 图标在网站首次加载时未加载；如果单击 link 则解决

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

css

icons

zurb-foundation-5