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>

have you check the following path correctly? and did you check how you declared it in css — arnold, Jan 19 '14 at 15:49

score 8 · Answer 1 · edited May 23 '17 at 10:33

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.

Strange, I have a element following one of my icons, being used as a label of sorts. This fade works great to make all the icons appear. For some reason, the tag following the icon remains hidden. Adding a "i.fa + small" condition fixes it, but weird weird weird. — Will Lanni, Mar 18 '14 at 22:40
Will, yep I see various instances where some icons appear without the fix, and some don't. Thankfully, Chrome 34 beta doesn't appear to have the issue, but Google is taking their sweet time bringing it to fruition, which is hilariously ironic seeing how fast they've brought out the previous 33 versions. Shrug. — purefusion, Mar 20 '14 at 08:52
It appears you can also apply the animation to the body instead and it will fix all missing fonts on the page. — purefusion, Mar 23 '14 at 09:17

score 7 · Accepted Answer · answered Jan 23 '14 at 23:06

7

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

answered Jan 23 '14 at 23:06

Mike Atlas

8,193
4
46
62

Apparently it's fixed and will be in Chrome 33. For now all you can do is hover over those elements or click them to force them to repaint with the right font. – Julik Feb 12 '14 at 15:05
4

FWIW I am on 33.0.1750.117 and still see the problem. – Mike Atlas Feb 20 '14 at 19:26

score 1 · Answer 3 · answered Mar 24 '14 at 14:00

1

I had the same problem: it was solved by moving css-styles from <body> to <head> section.

answered Mar 24 '14 at 14:00

Aly

19
4

score 0 · Answer 4 · edited May 23 '17 at 10:29

0

using google chrome webdeveloper tool network monitor check font files load correctly, and if not add font file extensions in mime types. https://stackoverflow.com/a/5535020/3212522

edited May 23 '17 at 10:29

Community

1
1

answered Jan 19 '14 at 16:25

cparts

19
3

So it appears to work perfectly on Chrome. I went ahead and pushed it to Heroku and it works perfect on Mozilla in production as well as Chrome so it must be some issue with the dev environment. In any case, thanks a ton for your help! – Tom Hammond Jan 19 '14 at 23:37

score -1 · Answer 5 · answered Oct 13 '15 at 04:55

-1

Add this in GEMFILE

gem "font-awesome-rails"

And run

bundle install.

And If you prefer SCSS, add this to your application.css.scss file:

@import "font-awesome";

answered Oct 13 '15 at 04:55

Ashish Pathak

827
8
16

Why are my font awesome icons disappearing on page loading?

5 Answers5