字体真棒图标在 chrome 中显示为正方形？答案

【问题标题】：Font awesome icon showing as square in chrome?字体真棒图标在 chrome 中显示为正方形？
【发布时间】：2013-04-04 08:21:10
【问题描述】：

我正在尝试在按钮中使用字体超赞的图标。该图标在 Firefox 中工作正常，但是当我在 chrome 中使用它时，它显示为一个正方形。我环顾四周，唯一发现是字体的路径可能不正确，但是我已经尝试了 cdn 版本here，它仍然可以在 Firefox 中工作，但不能在 chrome 中工作。

我还在计算机上的静态 html 文件中尝试了相同的样式表，它工作正常。

这里是使用的 html 示例：

<a id="btnLogin" href="url.com" class="btn btn-primary btn-large disabled">
    <i class="icon-refresh icon-white"></i> 
    Sign in using Facebook
</a>

Web 应用程序也是使用 Rails 构建的，并且使用引导程序作为模板。

关于什么可能导致这种情况的任何想法？

【问题讨论】：

页面的字符集是什么
你能在 Chrome 中的 font awesome 演示页面上看到 font awesome 字体正常工作吗？
尝试添加<meta charset="utf-8" />页眉
您可以发布您页面的完整 html 吗？
我也遇到了同样的问题，对我来说它最终是一个损坏的字体文件。重新下载解决了这个问题。

标签： twitter-bootstrap font-awesome

【解决方案1】：

我有同样的问题。但我很容易就修好了。

在 Font Awesome 中，字体文件必须放在“fonts”目录中，而不是以前版本中的“font”目录。

【讨论】：

【解决方案2】：

如果你把所有东西都放在了正确的位置（你甚至检查了 css 以确保路径正确并且你想知道是否需要一个 js 文件），请尝试查看你的 HTML：

 <i class="fa-users"></i>

这将显示问题中提到的带有数字/字母的正方形（而不是图标）。

 <i class="fa fa-users"></i>

这将显示您的图标！请记住，在 4.2.0 版本中，您必须添加 fa 类！

希望对你有帮助！

【讨论】：

【解决方案3】：

上面的答案是正确的，但我想进一步澄清一下，因为我认为字体真棒页面上的入门并不清楚。我添加了 min.css 样式表并在我的页面的头部链接到它。您还需要获取五个字体文件并将它们放在项目的“字体”文件夹中。应该有五个文件，它们将以：

.eot .svg .ttf .woff .otf

我在这里从 github 检索文件：https://github.com/FortAwesome/Font-Awesome

【讨论】：

感谢您的说明。我想改天解决这个问题，但现在它工作正常。

【解决方案4】：

我有同样的问题，最后我找到了问题所在。这是因为我已经将标签<i> 的font-family 覆盖为其他内容。

【讨论】：

【解决方案5】：

对我来说，这个问题是由于我的一个 CSS 文件中的杂散数字 4 造成的。

我把头发拉出来并使用了所有的修补程序都无济于事，但在打开一个完全不相关的 CSS 文件并在文档末尾找到数字 4 并将其删除后效果很好。

所以检查每个 CSS 文件是否有杂散字符。

【讨论】：

【解决方案6】：

答案很晚，但这可能会帮助那里的另一位兄弟！

我发现这种行为是通过没有 display: block; 来解决的。在 i/.fa 元素上。

.fa 是标准的 inline-block 但我将其更改为 block 以便更好地兼容旧浏览器，但它必须是 inline-block 或其他类似的东西。

希望它可以帮助那里的人！

【讨论】：