If you’ve utilized Elementor’s Custom Icons feature and have created your own icon font using a tool like fontello, you might encounter an issue where the custom icons are not showing on the live website. This problem can be attributed to various factors, but in many cases, it arises due to an active experimental setting that needs to be deactivated.
Fixing the Elementor Custom Icons not showing up by disabling the Inline icons experiment
To resolve this issue, you start by accessing the WordPress dashboard and navigating to Elementor’s settings. Look for the “Experiments” section and locate the “Inline Font Icons” option. Ensure that this setting is set to “Inactive.” It’s worth noting that this particular setting is known to cause difficulties with icon-related elements.
In the context of Elementor Custom Icons, having “Inline Font Icons” active can interfere with their proper functionality.
Solving the Elementor Custom Icons issue by forcing the loading of the Font
In some cases, the issue may be as simple as the font not being loaded on the live website. While the icons appear correctly in the Elementor editor, they fail to show up on the front end.
This problem typically occurs when you exclusively use custom CSS to display your custom icons. Without explicitly instructing Elementor to download the font, it is not present on the page.
To resolve this, you need to ensure that Elementor downloads the font. There are two approaches you can take: the direct method and the indirect method.
Direct Method: Enqueuing the Font Icon
To begin, you’ll need to include a link to your CSS file and load it by adding the following HTML code to the <head> section 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' />Remember to replace “icon-set-name” with the actual name of your font icon.
To determine the precise path you should enter, access your ‘/wp-content/uploads/elementor/custom-icons/‘ folder via FTP or your cPanel File Manager. Once you have the correct path, you can leverage Elementor’s Custom Code feature to insert this code snippet into the section of your website.
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:
Taking it further
As a web designer, having a solid grasp of CSS can revolutionize your professional journey. Discover why mastering CSS is crucial for your success:
Unleash Design Potential: Elevate your designs to new heights by harnessing the power of CSS. With its versatility, you can craft visually captivating and unique layouts that captivate audiences and differentiate your work from competitors. Leverage CSS to incorporate stunning animations and tailor the appearance of websites to perfectly align with your clients’ brand identities.
Streamline Efficiency: CSS empowers you to optimize your design process, saving valuable time and effort. By creating reusable styles and layouts, you can swiftly apply them to multiple pages and elements, eliminating redundant tasks. This efficiency boost allows you to deliver exceptional websites more efficiently.
Meet Industry Demand: In today’s digital landscape, the demand for web designers with CSS expertise is soaring. Employers seek professionals capable of developing engaging and responsive designs that cater to user needs. Mastering CSS not only enhances your employability but also positions you as a standout candidate in a competitive job market.
Conclusion
We hope this helped you solve the Elementor Custom Icons not showing up issue!
If You are looking to unlock all Elementor PRO widgets for free, follow this link.
Let us know in the comments if you have any questions or problems, we’ll reply as soon as we can.