11

我正在尝试在按钮中使用字体很棒的图标。该图标在 Firefox 中工作正常，但是当我在 chrome 中使用它时，它显示为一个正方形。我环顾四周，唯一发现的是字体的路径可能不正确，但是我已经在这里尝试了 cdn 版本，它仍然可以在 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 构建的，并且使用引导程序作为模板。

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

4

6 回答 6

15

我遇到过同样的问题。但我很容易就修好了。

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

于 2013-10-25T00:18:00.743 回答
8

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

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

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

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

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

希望能帮助到你！

于 2014-09-17T08:54:49.183 回答
1

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

.eot .svg .ttf .woff .otf

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

于 2014-08-13T21:25:36.503 回答
1

我有同样的问题，最后我发现了问题所在。这是因为我已经font-family将标签覆盖<i>到了别的东西上。

于 2015-03-06T08:19:03.887 回答
0

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

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

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

于 2014-10-08T15:56:38.207 回答
0

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

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

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

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

于 2015-08-30T10:09:01.290 回答