Icons have become an integral part of web designing. Incorporating icons on websites makes your information more understandable and attractive. There is an icon for every occasion, you name it, and you will definitely find one for yourself. There are social icons, cart buttons, lists, navigational icons, and many more.
When creating a website using Elementor Page Builder, you will get many icons in the Icon library, which you can add to make your website look appealing and simplified. However, Elementor also allows you to add some other icons apart from those present in the library.
The Elementor Pro provides you with the feature to add your own custom icons on your website without using any 3rd party addons and without writing a single line of code.
The Custom Icon feature allows you to add new icons easily to the existing gallery. You can style and use them with a variety of different elements inside the Elementor Page Builder. In this tutorial, we will see the step by step process to add custom icons to Elementor.
Getting an Icon
Before adding the icons to the Elementor library, we need to download the icon’s zip file. For this, there are multiple resources available like Fontello, Fontastic, Flaticon, and many more. Here in this tutorial, I will use the Fontello websites to get the icons.
Step1: To select the icon of your choice, visit Fontello website.
Step 2: Choose icon you prefer and click on Download Button
Installing Icons in Elementor
Once you are done downloading your favorite icons’ zip files, you need to install them inside the Elementor’s Icon Library.
Step 1: To begin with, Go to the WordPress admin dashboard and navigate to the Elementor >> Custom Fonts.
Step 2: Enter a name for the Icon Set and just browse the icon file which you have just downloaded.
Step 3: After you are done with uploading all the files, click on Publish and you are all set.
Once the files are uploaded, it will be available in the Elementor’s Icon Library.
Step 4: Next, edit the page in the editor where you want to place the icon, and add use the Icon widget inside a Section / Column.
Step 5: Click on the edit icon setting and then click on Icon Library.
Step 6: Click on the Folder containing your icon and select the icon which you want to add and then just simply hit Insert.
That’s it ! Your preferred icon is inserted and you can style it according to your choice.
This is an awesome tutorial. For some days, I am trying to add a custom icon but can’t. Now after reading this tutorial I was able to add a custom icon easily. Thanks for sharing.