Simple Fix for Elementor Custom Icons Not Showing

Simple Fix for Elementor Custom Icons Not Showing

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

If you are using the Elementor Custom Icons feature, and you made your own icon font with a tool like fontello, then uploaded it in Elementor > Custom Icons, you might wonder why they aren't showing up on the front end.

There are a few reasons for that. Most of the time, it will be because of an experiment that should be disabled.

Fixing the Elementor Custom Icons not showing up by disabling the Inline icons experiment

The first thing you will want to check is to navigate under WordPress > Elementor > Settings > Experiments, and set "Inline Font Icons" to Inactive.

No description available.

That setting often causes problems with anything icon related, and in this particular case, it does prevent Elementor Custom Icons from working properly.

Solving the Elementor Custom Icons issue by forcing the loading of the Font

Sometimes the issue is simply that the font isn't loading on the front end. Everything works fine in the editor, but the icons don't show up on the front end.

This will happen if you are using only custom CSS to show your custom icons. Then, nothing tells Elementor to enqueue the font for download, so it's not present on the page.

You will need to force Elementor to download the font. There are two ways to do this: the direct method, and the indirect method.

Enqueuing the Font Icon with the direct method

You will want to link to your CSS file and load it by adding this kind of HTML in the <head> of your page:

<link rel='stylesheet' href='https://cdn.element.how/wp-content/uploads/elementor/custom-icons/icon-set-name/css/icon-set-name.css' media='all' />

You will need to replace icon-set-name with your actual font icon name.

To know exactly what path you need to enter, visit your /wp-content/uploads/elementor/custom-icons/ folder by FTP or through your cPanel File Manager.

Then, you can make use of the Elementor Custom Code feature to add this code to your <head>

Simple Fix for Elementor Custom Icons Not Showing 1

Enqueuing the Font Icon with the indirect method

Preferably you will want to use the direct method. Use this indirect method only if you don't want to bother / just want to quickly test.

This is simple enough: on the pages where you need your custom icons (or in the footer template if you need them everywhere), add an icon element and set the icon to one of the custom icons. Elementor will then take care of enqueuing the required CSS and Font.

Then you can make the icon hidden on all viewports:

Simple Fix for Elementor Custom Icons Not Showing 2

Conclusion

I hope this helped you solved the Elementor Custom Icons not showing up issue!

Cheers!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.