Menu
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.
238
This is a Pro icon! To use the solid style of “square“, you'll need a subscription to a Pro-level plan or a perpetual Pro license that includes the specific version of Font Awesome in which this icon (or style) was released.
Make sure you're using the latest and greatest by updating your CDN code reference, updating your Font Awesome package via npm, or downloading a fresh copy of Font Awesome. You can check with version an icon was added to on its detail page (e.g. question-circle was added in Verion 1 but last updated in 5.0. 0).
You place Font Awesome icons by using the prefix fa and the icon's name.
Icon fonts are fonts that contain symbols and glyphs instead of letters or numbers. They're popular for web designers since you can style them with CSS the same way as regular text. Also, since they're vector's they're easily scale-able. They're small, so they load quickly and (bonus!)
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:
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
