Question

我正在尝试在按钮中使用font-awsome图标。该图标在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构建，并使用bootstrap作为模板。

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

Answer 1

我有同样的问题。但我很容易解决它。

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

Answer 2

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

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

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

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

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

希望它有所帮助！

Answer 3

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

结尾

.eot .SVG .TTF .woff 杂项文件

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

Answer 4

我有同样的问题，最后我发现了问题所在。这是因为我已将标记font-family的{{1}}覆盖为其他内容。

Answer 5

对我来说，这个问题是由于我的一个CSS文件中有4个错误。

我把我的头发拉出来并使用了所有点缀的修复无效，但在打开一个完全不相关的CSS文件并在文档末尾找到数字4并将其删除后，它完美地工作了。

因此请检查每个CSS文件是否有杂散字符。

Answer 6

很晚才回答，但这可能会帮助另一位兄弟！

我发现这个行为是通过NOT display：block;在i / .fa元素上。

.fa是标准的内联块，但我将其更改为阻止以便更好地兼容旧浏览器，但它必须是内联块或类似其他内容。

希望有人帮助那里的人！

字体真棒图标显示为铬广场？

6 个答案: