Why are my font awesome icons disappearing on page loading?

Question

Any idea why my font-awesome icons would display initially on the page and then turn into blank squares once the page is actually loaded? Here's my 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'

My application.css file:

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

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

Here's how I'm calling the icons:

<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>

Answer 1

Since this font-rendering bug still exists in Chrome as of version 33.0.1750.152, a temporary workaround for now would be to force elements to repaint without any user interaction. This can be done via CSS by changing some property of the FontAwesome icons that are disappearing via a webkit animation (which still uses prefixes, unfortunately).

This simple fix uses a fade-in animation:

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; }
}

It's not the sexiest fix, but it does the trick in the meantime.

Note: Any duration below 3s doesn't really seem to animate the fade-in, so it would look as it might normally look when Chrome loads the font and renders it (with its typical slight delay). If you want the effect to be seen, use 3s or more for the animation. Adding a delay to the animation might also show the effect with a shorter duration, but that's not the purpose of this fix, so experiment further on your own if you wish.

Also, if you don't have any other properties you wish to override, such as line-height due to misalignment of FontAwesome icons and text you could simply use .fa instead of the higher-specificity rule i.fa that I used above.

I really wish Chrome developers worked on more edge features. The look and feel of several experimental CSS styles/effects that used to work great have degraded significantly in recent versions. That really annoys me.

Answer 2

There's currently an open bug in Chrome regarding web font rendering. See here, here and here.