Why is this happening with the icons ?
I managed to solve by changing the path in the css.
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.
It happens only in Chrome,
But as you can see the twitter button image is greyed out.
http://merrybadend.com/
So I wonder if something wrong in my code or is this a bug of Chrome?
I also did try to use the code in the DIV which the image is placed.
display:block
But that doesn't work.
However other browsers don't have this problem.
Thanks
Change image from CMYK to RGB.
That will solve the problem.
The grey image, how it did look
I have a weird problem going on in my project. I have a navigation menu where, when you hover it will change the font-weight from 400 to 900. It works just fine in Apple based products. However, when I try it on windows, by hovering over the links they get messed up, the Font Awesome icon goes over the font for some reason... Can anyone make any sense of this?
Before Hover
After Hover
It was the default bootstrap padding that was to blame for the problem
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.
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