How to fix missing icons in WordPress

When utilizing a page builder such as Elementor (among others), you might notice that icons are visible within the builder environment. However, once you exit or preview your site, these icons disappear.

Root Cause: The issue often doesn’t stem from hosting but rather from the settings within the page builder itself.

Fixing the Missing Icons in Different Page Builders

To cater to a wide range of users, we’ve provided steps for various page builders, focusing on enabling icon libraries like Font Awesome:

Elementor:

• Navigate to: WordPress Dashboard > Elementor > Settings.
• Switch to the Advanced tab.
• Locate “Load Font Awesome 4 Support” and select Yes.
• Finalize by saving changes and clearing your website’s cache.

WPBakery Page Builder:

• Head to: Dashboard > WPBakery Page Builder > General Settings.
• Ensure the option “Disable FontAwesome” remains unchecked.
• Remember to save if you’ve made alterations, followed by cache clearance.

Divi Builder:

• Choose: Dashboard > Divi > Theme Options.
• In the General tab, ensure “Disable Font Awesome and Material Icons” isn’t checked.
• Apply changes and ensure you clear cache for optimal performance.

Beaver Builder:

• Proceed to: Settings > Beaver Builder > General from the WordPress admin section.
• Confirm “Disable Font Awesome icons” is set to No.
• As always, save any modifications and then purge the site’s cache.

Thrive Architect:

• From the dashboard, select: Thrive Dashboard > Architect > General Settings.
• Activate the “Font Awesome Support” option.
• Conclude by saving and purging your website’s cache.

Additional Tips for Ensuring Icon Visibility

Post the activation of the necessary settings within your chosen builder, always clear both your website cache and browser cache. If the issue persists, consider reviewing any optimization plugins or CDN configurations that might obstruct icon visibility.