Icon-font sporadically shows up as squares and back to icon on hover

问题

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.

回答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: