图标字体偶尔显示为正方形，并在悬停时返回图标

Question

Getting a weird behaviour for FontAwesome icon font.

Icons do show up on a page load, but when I'm flipping between the tabs and going back to the original page, icons might appear as white squares (not every icon, just some). When hovering mouse over them, they are back to normal display.

I'm loading the font via CDN:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

I guess white squares are from FontAwesome CSS, the browser having troubles to recognise the character:

.fa-facebook:before {
  content: "\f09a";
}

I'm a bit lost why it is keep happening after switching tabs. The font seems to be loaded, as on the first load I can see the icons. Might it be a conflict with other CSS?

Need some suggestions where to look for a root cause.

Answer 1

I was brought to your question, because we have been experiencing the same thing on our site with the Symbolicons icon font.

After doing some research I found out that this happens due to a bug in Chrome. So the issue is not with Font Awesome and I don't think you can do anything for now to fix it. Guess we just have to wait for the fix to hit the stable Chrome version.

Links to the bug discussions:

• Issue 336075: embedded fonts unload
• Issue 336170: Wrong rendering of Webfonts when loading tabs in background