On a web project I'm working on I have a fixed navbar at the top of the page and the content underneath has Font Awesome icons sprinkled around.
Initially, I was using a CDN link to FA and everything was rendering fine.
When I tried using a local version retrieved through Bower, the icons were being rendered above the navbar while all other content was being rendered properly below.
The z-index on the icons are set to auto for both CDN and local versions (Font Awesome version 4.6.0).
I have tried modifying the icon z-index values manually to no avail.
The issue appears on both Firefox and Chrome.
Has anyone experienced this problem before?
just recently came across this problem.
Apparently, font awesome icons has z-index: 4
Therefore, set .navbar to z-index: 5 or anything greatly than 4, the problem's gone.
Check that the stylesheets are being loaded in the same order - you can do this on the network tab.
Latency may be causing one stylesheet to apply out of order - especially if you are using imports.
Related
Some Font Awesome icons (v4.7) are not displayed in Chrome (not even in the fontawesome.com webpage) - plz see attachment. It seems the ::before is completely missing. The icons are correctly displayed in FireFox.
Please any ideas why this happens? Thanks.
Are you using Ad-Blocker or similar?
We had a user report this very same issue - most icons worked but share and share-alt icons wouldn't. Couldn't replicate the issue on Chrome until we figured the user had Ad-Blocker running. Got them to add the site to the whitelist and the problem went away.
I have a site with a number of font awesome icons on a page. They all loaded correctly until recently, I noticed today that the handshake icon has stopped displaying the element is ##.fa-handshake-o.fa.vc_icon_element-icon. I have tried replacing it with other FA icons and they display fine. Only the handshake icon has stopped.
Can anyone help me with a fix to get it to display again?
I can provide any more info if needed. Thank you.
I'm trying to implement a site using AdminLTE template. After setting up the skeleton page i get a small pixel rendering issue with font-awesome icons. In my site the icons are slightly raised as you can see in the attached screenshots:
As you can see the icons are at a slightly higher position than the normal one. The user menu stays at the same position.
I've looked at the CSS properties using Chrome dev tools but can't see any difference.
Anyone has a clue of what it can be?
Thanks in advance.
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.
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
Bootstrap version 3
Font Awesome version 3.2.1
I am having issues with bootstrap and font awesome on Chrome. When I originally load a page, the font awesome icons are displayed correctly. When I refresh the page, the icons disappear. **To clarify, the entire icon is missing, this is not the empty box issue that some others encounter.
I'm grasping at straws here, but I noticed there were differences in the order in which the files were retrieved between the original page load and the refresh.
When the page is refreshed, the font file is the last item to be retrieved, and it appears to be a cached version as well.
Finally, any icons that are located inside of a <div class="btn"> will be loaded when the mouse hovers over the div.
Any help would be much appreciated!
Initial page load
Page refresh
I guess you are on a Windows machine, right?
This is an old problem with Chrome. See this posting on CSS Tricks. The next to last post should be the answer to your question. Or in short: Use the PUA (Private Use Area) for encoding.
The Unicodes (PUA codes) for each icon are listed in the Font Awesome CSS file - see: Font Awesome uses the Unicode Private Use Area (PUA)... (around line 190).
I got the same problem in latest verion of chrome (33.0.1750.152)
Working solution for me: move styles from body to head section.