Font awesome icons showing up as blank boxes in live site while it is showing up correctly locally. Added "fa" in front of the class but still not working. Any idea why?
to test, try loading the code through their CDN rather than locally. see if that does the trick.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
I faced a similar issue. I realized I had not put all the fa webfonts. You can debug your issue by going to Inspect Element -> Network and then see which files are resulting in a 404 error.
Go to their initiators and upload those files. It will start working again.
Related
The icon that displays on my iPhone XS (Safari) is incorrect. If I bookmark the site or add to favourites the new/correct image is displayed but if I click the 'tab' icon, where you see all open tabs it's a very old favicon.
The image that is displayed isn't my the hosting. I've even changed hosting provider recently so everything is fresh. I can only assume the previous icon is cached from the old site on my phone - but the same domain name.
I have cleared Safari's cache and in "Advanced" the "Website Data" but no matter what I do the icon won't change. I've tried adding ?v=2 to the URL to try and force a fresh download but no matter what, it won't display the image I'm specifying in the head.
I load my icons like this:
<link rel="apple-touch-icon" href="icon.png" sizes="192x192">
<link rel="shortcut icon" href="favicon.png" sizes="32x32">
Any ideas? The only thing I can think of is the device itself is storing aspects on websites but outside of Safari and the cache?
I had the same problem and found the following.... use the "+" in safari to go to your START PAGE, then delete ALL instances of that page, go to edit at the bottom and turn off favorites, then turn it back on. The favicon updated.
Interesting, with further research I found out it's a known issue for Safari IOS/IpadOS to cache favicons in a hidden location.
Safari has extremely aggressive favicon cache. I've seen it happen multiple times on large production websites that the favicon doesn't update for months.
source
It seems like MacOS has a folder that stores that data, but unfortunately that location is not accessible via mobile (to my knowledge).
Without giving you a fix for you issue, I hope that my answer might bring light on this cache issue, as I'm experiencing the same problem on my IPhone 13 pro 15.6.1
Kindest regards
I used elementor icons (cart icons) for my WordPress website. it works earlier fine but right now once I logged in as admin then only the icon got displayed as soon as I logged out and view the website as a normal user, then the icon got disappeared and instead of it, some cross icon got displayed.
I tried to figure out the error and found the following things
<link rel='stylesheet' id='elementor-icons-css' href='https://lotusproshop.se/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css' media='all' />
This stylesheet load only when I logged in. One more thing: I observed that the cart icon does appear for some time and then changed into cross icon
I tried to paste all CSS of this stylesheet manually but it didn't work. Why does this error occur, and how can I fix this?
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.
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.