FontAwesome Icons Not Displaying Properly

Support
#1

Hello,

First of all, I want to thank you for your amazing theme, which I’ve been using for 5 years without any issues.

However, since yesterday, I’ve been experiencing a problem with FontAwesome icons.
This issue appeared in an incomprehensible way, which is why I need your help.

I simply added an “Alert” element to that page.

After doing so, the social media icons in the top bar disappeared .

I removed the alert from the page, and the social media icons reappeared (I don’t see the link, but just deleting the alert from the page brought the icons back to the top bar).

However, all other icons on my site disappeared , including the mobile menu button , which I had to manually restore using additional CSS.

Now, instead of my icons, I either see nothing or a small colored dot in places where icons had a background.

The only icon that didn’t disappear is the brain icon on this page… which is quite strange.

It does not come from any plugin as it is the same in Vanilla mode, nor from the child theme.

Could you please help me? This is happening at a critical moment as I’ve just launched a campaign to promote my courses.

I sincerely appreciate your support.

Best regards,

Simon
X & Boost Licences

#2

Hello Simon,

Thank you for your inquiry and kind words! Glad to know you’re finding Cornerstone and the theme helpful. Regarding the issue, we may need to access the site to check further. Please create a test page and provide the login details in the secure note.

secure-note
secure-note1040×250 15.3 KB

Best regards,
Ismael

#3

Thank you Ismael :smile:
I’ve created the secure note with login details :pray:

#4

We added an Alert element in the Formations page but we’re not able to reproduce the issue. Can you clone the site to a staging environment without the fix for the icons?

#5

Hi Ismael,

Thank you for your response!

The issue persists despite my forced CSS. The CSS only forces the mobile menu icon to appear, but the problem remains across the entire site.

On this page, you can see that the brain icon displays correctly, but all the other icons appear as dots.

You can make modifications in the child theme if needed.

If cloning the site is absolutely necessary, would WP Staging be sufficient? I have never done this before…

Thanks again for your help!

Best regards,

Simon

#6

Thank you for the update.

We can now see the issue but we’re not yet sure what is causing it. The site is also timing out randomly and it’s quite slow on our end, so we’re having difficulty debugging the issue. Have you tried deactivating the plugins temporarily?

111
1111921×956 112 KB

Yes, using WP Staging is fine. You can also use plugins like Duplicator or WP Migrate DB to transfer the site to another domain.

We’ll try to check the issue again once the staging site is available.

Warm regards.

#7

Hi Ismael,

Thanks for getting back to me.

Apologies for the 524 error earlier—I was running some server tests. It shouldn’t be an issue on your side anymore.

I already tried disabling plugins using Health Check, but it didn’t make any difference, so the problem doesn’t seem to be plugin-related.

Here’s the staging version of the site: https://simondumas.fr/shenzhou

Thanks for your help!

Best,

#8

Hello Simon,

I have checked the three icons on the page. They both share the same element setting. This could mean a caching issue that is to say that the SVG file were not loaded by your server. I can see that you are using WP Rocket and you also have CloudFlare. Kindly temporarily deactivate the WP Rocket plugin and set the CloudFlare to Development Mode while we are troubleshooting the issue. For reference, since the issue happened after the updats, this documentation might help:

Best Regards.

#9

Hello Nelson,

Thank you for your message.

Before reaching out to support, I had already tested deactivating WP Rocket and Cloudflare , but the issue remained. I have now set Cloudflare to Development Mode , disabled the proxy , cleared the cache , and reactivated the OVH servers .

For WP Rocket , I had already tried disabling it both via troubleshooting mode and through a complete deactivation before contacting support, but it did not resolve the issue.

I also want to clarify that this issue did not appear after an update . I had been using WP Rocket and Cloudflare for a while , and I had not yet updated X or Cornerstone when the problem started.

The issue occurred right after adding an alert in Cornerstone . Initially, this alert only removed the social icons , but after removing the alert, the social icons reappeared while the other icons disappeared . I don’t know if this is a coincidence or a direct cause , but at that moment, the only change I made was adding an alert to a page via Cornerstone when the issue started.

To make troubleshooting easier, I have once again deactivated WP Rocket and Cloudflare on the main site , so you can take a closer look.

Thank you for your kind assistance!

Best regards,

Simon

#10

Hello Simon,

Thank you for the detailed info.

We edited the staging site and set the Cornerstone > Theme Options > Fontawesome > Load Type from “SVG” to “Webfont”, and this seemed to have fixed the issue. Unfortunately, we are not yet sure why it’s not working with the previous load type.

We also applied the same changes to the live site, and it fixed the issue with icons as well.

11
111943×949 96.5 KB

Please make sure to purge the cache before testing.

Best regards.

#11

Hey guys,

Thanks for your help, the site is already looking a bit better!

However, the icons that previously had a nice round background now appear in a weird oval shape, even though the border-radius is set to 100… This issue didn’t occur when using SVGs, which I would still like to restore if possible.

Thanks again for your help!

#12

We adjusted the width and height of number icons in the staging site.

11
111919×961 88.7 KB

Thank you for your patience.

#13

OK, thank you guys :pray:

Please let me know if you find a way to restore the SVG icons, as I’ve noticed some performance loss since switching to the Webfont.

Thanks again!

Simon

#14

No problem, Simon.