Hi,
the icons in my Top Menu are not showing in some browsers anymore. I’m not sure if it has been since the latest wp update or before already. The icons show up in safari, but not in chrome or firefox. This is my website: https://rutisreisen.de
Can you help me please?
Hi @pruti,
Thanks for reaching out.
The font awesome font that are responsible for icons returns 404, and it’s because of wrong URL (probably old URL). And this is very common if you update from old version to latest without clearing your caches. I can see that there is active caches there and it’s still pointing to old URLs. Could you try cleaning your caches? And if it doesn’t fixes the issue then please deactivate all the cache plugin and features and test it again.
Thanks!
Hi,
I emptied the caches and I also deactivated all my plugins one by one but it didn’t fix the issue. What can I do now?
Hey @pruti,
I checked your site and I still see the content of your site is being served by the cache and there are old references of Font Awesome being requested. Please clear all caches of W3 Total Cache plugin and then deactivate it.
This also happens if your site has icon markup that you added directly rather than using our icon shortcode. As of Font Awesome version 5 they split icons into multiple fonts. This can be fixed by changing instances of the data-x-icon attribute to one of the following:
data-x-icon-b for social icons.
data-x-icon-o for outline icons.
data-x-icon-s for solid icons.
The original attribute data-x-icon will still work for solid icons as a fallback but we’ve updated everything for consistency.
Also checkout FAQ section of https://theme.co/apex/forum/t/release-notes-pro-2-2-x-6-2-cornerstone-3-2/38234. You can also get the latest icons markup from here https://fontawesome.com/icons?d=gallery
Let us know how this goes!
Thanks again for trying to help me. Unfortunately it’s not working. The thing is that all icons are working. Only the Home button and the envelope in my main menu are missing. In Safari it works fine. Also with w3 total cache activated. But in chrome it’s not working.
I use these codes:
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
I tried to change them to the ones fontawesome.com shows (for example: ) But it doesn’t help. If I change it it even does not work in safari anymore.
I deactivated w3 total cache and left it deactivated for now.
Do you know what else I can do?
Hello @pruti,
Please use this icon codes instead:
<i class="x-icon x-icon-home" data-x-icon-s="" aria-hidden="true"></i>
<i class="x-icon x-icon-envelope" data-x-icon-s="" aria-hidden="true"></i>
Kindly let us know how it goes.
That did the job. Thank you very much for your help!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.