为什么我的字体真棒图标在页面加载时消失了？答案

【问题标题】：Why are my font awesome icons disappearing on page loading?为什么我的字体真棒图标在页面加载时消失了？
【发布时间】：2014-02-08 16:47:19
【问题描述】：

知道为什么我的字体很棒的图标最初会显示在页面上，然后在页面实际加载后变成空白方块吗？这是我的gemfile：

 gem 'rails', '4.0.1'
 gem 'bootstrap-sass', '2.3.2.0'
 gem 'bcrypt-ruby', '3.1.2'
 gem 'faker', '1.1.2'
 gem 'will_paginate', '3.0.4'
 gem 'bootstrap-will_paginate', '0.0.9'
 gem "libv8", ">= 3.11.8"
 gem "therubyracer", ">= 0.11.0", :group => :assets, :platform => :ruby, :requir\
 e => "v8"
 gem 'execjs'
 gem 'rails_12factor', group: :production
 gem 'font-awesome-rails'
 gem 'font-awesome-sass'

我的 application.css 文件：

  *= require_self
  *= require_tree .
  *= require font-awesome
  */

 @import 'twitter/bootstrap';
 @import 'font-awesome/font-awesome';

我是这样称呼这些图标的：

<section id="our-services" class="pad-top-50">
                     <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <div class="service">
                                <span class="service-icon">
                                <i class="fa fa-android"></i>
                                </span>

【问题讨论】：

下面的路径你检查对了吗？你有没有检查过你是如何在css中声明它的

标签： html css ruby-on-rails font-awesome

【解决方案1】：

由于这个字体渲染错误在 Chrome 33.0.1750.152 中仍然存在，目前的临时解决方法是强制元素在没有任何用户交互的情况下重新绘制。这可以通过 CSS 来完成，方法是更改通过 webkit 动画消失的 FontAwesome 图标的某些属性（不幸的是，它仍然使用前缀）。

这个简单的修复使用淡入动画：

i.fa {
  -webkit-animation: show 1s 1;
  /* any other properties to override from FontAwesome's default .fa rule */
}
@-webkit-keyframes show {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

这不是最性感的修复，但同时也能起到作用。

注意：任何低于 3 秒的持续时间似乎都不会真正为淡入设置动画，因此它看起来就像 Chrome 加载字体并呈现它时的正常外观（具有典型的轻微延迟）。如果您希望看到效果，请使用 3s 或更多的动画。向动画添加延迟也可能会以更短的持续时间显示效果，但这不是此修复的目的，因此如果您愿意，请自行进一步试验。

此外，如果您不希望覆盖任何其他属性，例如 line-height due to misalignment of FontAwesome icons and text，您可以简单地使用 .fa 代替我上面使用的更高特异性规则 i.fa。

我真的希望 Chrome 开发人员能够开发更多的边缘功能。在最近的版本中，一些过去效果很好的实验性 CSS 样式/效果的外观和感觉已经显着下降。这真的让我很烦。

【讨论】：

奇怪，我的一个图标后面有一个元素，被用作各种标签。这种淡入淡出非常适合使所有图标出现。出于某种原因，图标后面的标记仍然隐藏。添加“i.fa + small”条件可以修复它，但很奇怪很奇怪。
威尔，是的，我看到了各种情况，其中一些图标在没有修复的情况下出现，而有些则没有。值得庆幸的是，Chrome 34 测试版似乎没有问题，但谷歌正在花时间实现它，看到他们推出前 33 个版本的速度有多快，这真是讽刺。耸耸肩。
看来您也可以将动画应用到正文，它会修复页面上所有丢失的字体。

【解决方案2】：

Chrome 中目前存在一个关于网络字体渲染的开放错误。请参阅here、here 和 here。

【讨论】：

显然它已修复并将在 Chrome 33 中。现在您所能做的就是将鼠标悬停在这些元素上或单击它们以强制它们使用正确的字体重新绘制。
FWIW 我在 33.0.1750.117 上仍然看到问题。

【解决方案3】：

我遇到了同样的问题：通过将 css 样式从 <body> 移动到 <head> 部分来解决。

【讨论】：

【解决方案4】：

使用 google chrome webdeveloper 工具网络监视器检查字体文件是否正确加载，如果没有在 mime 类型中添加字体文件扩展名。 https://stackoverflow.com/a/5535020/3212522

【讨论】：

所以它似乎在 Chrome 上完美运行。我继续将它推送到 Heroku，它在生产环境中的 Mozilla 和 Chrome 上都能完美运行，所以它一定是开发环境的一些问题。无论如何，非常感谢您的帮助！

【解决方案5】：

在 GEMFILE 中添加这个

gem "font-awesome-rails"

然后运行

捆绑安装。

如果您更喜欢 SCSS，请将其添加到您的 application.css.scss 文件中：

@import "font-awesome";

【讨论】：