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.
Related
I'm using Font Awesome 5 Free via a kit. On desktop, the icons work perfectly. But on mobile (iOS chrome (normal and incognito), iOS firefox focus, iOS safari), they behave like Schrödinger's cats...
On first page load, the icons appear. Tap reload and they disappear and are replaced by small squares. Tap reload again and they reappear. Every other tap of reload shows or hides the icons.
I notice the same behavior if I toggle back and forth between "request desktop site" and "request mobile site". (I'm not sure what's really going on under the hood there since the page renders the same either way.)
Since they do appear correctly, at least part of the time, I don't think it's a cross-origin problem or a caching problem.
An example page is here: https://onlinesafetyzone.com/learn/learning-zone.php
I've read many posts, here and on GitHub and none of the solutions has worked. Anyone have a clue what's going on?
It seems you have somekind of a XSS issue. I would try to download the fontawsome resources and deploy them with the application. Can be that they have a CDN problem, every second time the fonts break :| so maybe one of the nodes is flipping.
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.
Youtube, Amazon, and a few other sites have a full bookmark image showing for their website. Mine is only showing my .ico. How do I code in a custom image for my blog? Is there meta tag for it? Thanks.
Edit:
Here is a screenshot of http://iconhandbook.co.uk/ in "Top Sites" in Firefox mobile:
Here is the same websites icon file:
http://iconhandbook.co.uk/favicon.ico
Take the time to look at their source code for their other icons.
So again my question: How do I get the same result as this website?
You can use the following extension to customize the image shown for pinned tiles, among other things.
https://addons.mozilla.org/firefox/addon/new-tab-tools/
I've just researched your question and there's result:
No, you can't add your custom bookmark icon. It's only available for big companies now.
There's no meta-tag for it. But you can try to do these things:
Change og:image of your blog. Possible it can help you with Chrome as described here
Add more apple-icon resolutions and android | wp icons
Fill your favicon by bg-color. I've tested some sites on Firefox iOS and found that's one, who has single-tone background and looks like you want.
I hope it helps you
I am trying to solve these issues, but I can't.
On this page, text is not showing in the Windows Safari browser: http://www.instyledirect.com/gallery.php
On the second page, some slider images are not showing: http://www.instyledirect.com/gold-gallery.php
Are you sure?
For me it's showing everything.
Try with some Safari extensions.
Had the same problem, check out Safari Show Error.
Maybe it would help you.
Clean also your Cache!!
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.