Elementor FREE – Replace icon with a custom one

Elementor Pro makes it easy to add icons in various places on your website. But on the free version of Elementor, there is no way to upload a custom icon unless you upload your own and make some CSS changes. In this tutorial, I am going to show you how a simple way of doing just that. It’s very easy!

Getting the icon

First of all, go and find an icon that you like or design your own. There are tons of icon font sites including IcoMoon and FLATICON. Some font icon services allow you to change the background icon color. For instance, FLATICON allows you to do that once you register an account. Just click on the icon at the top right of the screen and change the color. You would, then, need to save the icon as SVG format. Size is not important as we are going to set that up in our CSS. SVG is a vector-based image file format so the overall size will not affect the file size like in the case of a PNG image.

Uploading the icon

To be able to load the SVG file to our Media library, we would have to install a very useful plugin called SAFE SVG. Once installed, we can head to our media library and upload our custom icon. Once the icon upload, take note of the image URL that you see at the right side once you click on the image in the Copy Link read-only text field. It will be in the following format.

https://www.siteurl.com/wp-content/uploads/2020/02/telephone-icon.svg

The bit of code we are interested in is the text after the main site URL. We will use that in our CSS when we add our custom icon as a background image.

Adding an icon list widget in Elementor

Once you are done you make use of one of the icon widgets in Elementor. In my case, I inserted an, with the  Icon List and selected a phone icon from the icons provides. At this point, it doesn’t matter what icon you select because, as mentioned earlier, we are going to replace it anyway.

Finally, with the icon list selected, go to the Advanced tab and in the Advanced section add a CSS Class, like this:

Adding the CSS

Adding this CSS to your child theme or in the Customizer will create all the magic:

/* Header telephone icon */
.call-us span.elementor-icon-list-icon i {
  display: none;
}
.call-us span.elementor-icon-list-icon {
  background: url("/wp-content/uploads/2020/02/telephone-icon.svg") no-repeat center center;
  width: 50px;
  height: 50px;
  margin-right: 1rem;
}

In the above CSS, we first hide the original icon that we added in Elementor. Then we assign our custom icon as a background image to the parent container, set it to not repeat and center it horizontally and vertically. Next, we set the width and height of that container and finally, we add a bit of right margin to create some indentation to our text.

What about other Elementor icon widgets?

If you would like to use an Elementor icon widget instead, the CSS selectors would be slightly different:

.call-us .elementor-icon i {
  display: none;
}
.call-us .elementor-icon {
  background: url("/wp-content/uploads/2020/02/telephone-icon.svg") no-repeat center center;
  width: 50px;
  height: 50px;
  margin-right: 1rem;
}

Inspecting the CSS with your browser’s developer tools should be fairly simple to detect the right selectors.

That’s it! I hope you found the tutorial useful. If you are thinking about upgrading to Elementor PRO, you can use my affiliate link below:

GET ELEMENTOR PRO