Bootstrap SASS 字体真棒答案

【问题标题】：Font Awesome with Bootstrap SASSBootstrap SASS 字体真棒
【发布时间】：2014-12-09 22:51:09
【问题描述】：

我有一个 rails 4 应用程序。

我的字体真棒图标直到最近才起作用。现在，我用黑色方块代替了我的社交媒体图标（我不明白为什么那些已经取代了我一直在使用的彩色图标）。链接有效。标签与往常一样，与字体真棒方向相同。

我使用 sass gem 安装了 font awesome。我需要字体真棒，就在我的 application.css.scss 中的 self 上方。

我已经安装了当前的 gem (4.2.0)。

对于它的价值 - 这是我正在使用的链接的页脚：

<a href="https://www.youtube.com/user/Coalfacer"> <i class="fa fa-youtube fa-2x"></i> </a>

有什么建议吗？

谢谢

【问题讨论】：

如果你有 chrome 开发者工具、firebug 或类似的东西，你可以检查一些东西。字体下载了吗？如果没有找到，那就是你的问题。如果它根本没有尝试下载，可能你没有正确的字体声明。还要检查你的 <i> 元素，看看 FontAwesome 类是否被任何东西覆盖。
感谢詹姆斯。没有任何 div 覆盖 i 类。我没有按照 FA 规定的方式进行定义。如何查看字体是否已下载？
在 Chrome 开发者工具中，您可以查看网络选项卡，它会显示所有资源请求。您还可以仅对字体进行排序，以查看字体文件是否已下载。我假设 firebug 和 IE 开发工具（至少 11 个）会有类似的东西。如果所有这些都失败了，你可以使用 fiddler 来跟踪请求，但这并不理想，如果它是从缓存中加载的，它将无法工作。
啊。我收到一个 404 错误，提示找不到字体真棒字体。我该如何解决？
查看我添加的答案

标签： ruby-on-rails twitter-bootstrap font-awesome

【解决方案1】：

您可以使用 Chrome 开发者工具、firebug 或任何类似类型的工具来检查一些事情。首先，您要确保字体已下载。使用 Chrome 开发人员工具的网络选项卡，您可以查看传出请求和为提供页面而做出的响应。检查是否有对字体文件的请求。

两种可能的情况是

没有对该字体提出请求。这表明您在 CSS 文件的 @media 查询中的字体声明存在问题。
已请求字体，但返回错误代码。

如果返回错误代码，您需要确定出现这种情况的原因。例如 404 表示服务器无法在指定位置找到请求的文件，因此显然您需要检查该文件是否存在。要检查的另一件事是，Web 服务器配置为通过提供文件正确响应对字体的请求。我遇到过由于 Web 服务器不提供服务或明确禁止对 .woff 文件的请求而引发 404 错误的情况，这使得 404 错误有些误导。

如果正在发出对字体文件的请求并且服务器响应成功代码（200、302 等），则可能是您的 HTML 元素的样式存在问题。

使用上面提到的工具，您还可以“检查”HTML 元素，通常通过右键单击它并沿着这些行选择一个菜单选项（在 chrome 中是“检查元素”）。您应该能够看到每个元素的概要以及与此图像相似的样式的来源。

在那里你应该能够找出是否有什么东西覆盖了你的样式。

【讨论】：