{"id":18695,"date":"2024-04-13T12:37:07","date_gmt":"2024-04-13T07:37:07","guid":{"rendered":"https:\/\/mcstarters.com\/?p=18695"},"modified":"2024-04-13T12:37:10","modified_gmt":"2024-04-13T07:37:10","slug":"add-custom-icons-to-elementor-pro","status":"publish","type":"post","link":"https:\/\/mcstarters.com\/blog\/add-custom-icons-to-elementor-pro\/","title":{"rendered":"How to Add Custom Icons to Elementor Pro & Elementor Free"},"content":{"rendered":"\n

Would you like to create & add custom icons to Elementor Pro<\/a> and Elementor Free<\/strong>?<\/p>\n\n\n\n

Default Elementor<\/a> icons affect website performance. That’s why, in this article, we will show you how to add custom icons to Elementor Pro<\/a> and Elementor Free.<\/p>\n\n\n\n

Elementor supports Fontello, Icomoon, or Fontastic icons. We use Fontello icons in this article. I show step by step-by-step process, of how to the download Fontello icon and upload it into Elementor.<\/p>\n\n\n\n

Add Custom Icons To Elementor Pro<\/h2>\n\n\n\n

Before starting please Fontastic icons file here. We upload this file to the Elementor icon library and use them on the website.<\/p>\n\n\n\n

\n
Download Fontastic File<\/a><\/div>\n<\/div>\n\n\n\n

Step:1<\/strong>\u00a0 \u00a0After downloading the file\u00a0 you need to go to Elementor –> Custom Icons<\/p>\n\n\n\n

\"Click<\/figure>\n\n\n\n

Step 2<\/b>: Now enter the name of the custom icons and then click on “CLICK HERE TO BROWSE”.\u00a0<\/p>\n\n\n\n

\"Upload<\/figure>\n\n\n\n

Step 3: <\/b>Select a file that you download and then click on Open.\u00a0<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Step 5<\/b>: Go to Elementor editor and click on custom icons. Select the icon and use it. Done<\/p>\n\n\n\n

\"Elementor<\/figure>\n\n\n\n

This is how you add custom icons to Elementor Pro<\/a>. I hope you do this easily. If you need any help then leave a message in the chat box. I will help you.<\/p>\n\n\n\n

Add Custom Icon to Elementor Free<\/h2>\n\n\n\n

Step:1<\/strong>\u00a0 Install & activate the “Custom Icon For Elementor<\/strong>” plugin<\/p>\n\n\n\n

\"Install<\/figure>\n\n\n\n

Step:2<\/strong>  Go to Elementor and click on ” Custom Icons”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 3<\/b>: Upload a custom icons file.<\/p>\n\n\n\n

\"Upload<\/figure>\n\n\n\n

Step 4<\/b>: Select a file and click on open.<\/p>\n\n\n\n

\"Upload<\/figure>\n\n\n\n

Step<\/strong> 5:\u00a0When uploading is complete then go to Elementor Editor click on the custom icon tab and use the icon.<\/p>\n\n\n\n

\"Elementor<\/figure>\n\n\n\n

This is how you add a custom icon to Elementor Free.\u00a0<\/p>\n\n\n\n

Watch Video<\/h2>\n\n\n\n
\n