How to Add Custom Icons to Elementor and Jet Plugins

Icons have become an irreplaceable part of delivering information. There are so many of them for literally any occasion, from displaying social links and cart buttons to marking the most important parts of content, creating lists with checks, and many other purposes.

While using Elementor and Jet plugins represented at CrocoBlock, you’ll be astonished at how many icons there are for one’s choosing. When one needs to add an icon most of the widgets already provide Icon Picker option, and all one needs to do to set an icon is type in the icon title or select the needed one from the list.

 
In most cases, the icons can be styled according to one’s needs in widget’s Style settings block. In no more than several minutes, you’ll have an icon added to your content and beautifully styled according to your needs.

Yet, sometimes you can’t find the proper icon to suit your purposes. That’s when you might need to add your custom icons to the list. Let’s explain in more details how this can be done.

Adding Custom Icons

To use custom icons for Elementor and Jet plugins one needs to add the control to the backend and then to add the icons from the frontend. Please, follow the steps below to add custom icons to the list and display them in your content.

Adding Icons Control from Backend
  1. To apply the icons library, different from the standard FontAwesome 4 used in Elementor and Jet plugins, you’ll need to make changes in functions.php file. It is located in the folder here your currently active theme is installed. Please, note, that it is recommended to make changes in the Child theme in order to keep them in place in the case the theme gets updates in the future.

    Open functions.php file and add the following code to its end:

  2. Please, note, that the code “new-icon-1-css-class” stands for the icon CSS code, that can be found here, and the “icon 1” part stands for the title that is displayed in the Icon Picker.

    E.g, to add the angle-right icon you’ll have to look for its code in the online icons library and then paste its CSS code and provide it with a recognizable title to use.

    'fas fa-angle-right' =>'new angle-right icon',
  3. After that, you’ll be able to see the icon displayed in the icons list in Elementor editor for all the widgets, including the ones provided by Jet plugins.
Adding Custom Icons on Frontend
  1. Now you can choose the needed icons using Icon Picker tool. However, it is necessary to enable displaying them in frontend. JetMenu and want to set your custom icons for the menu items, there is a bit of customization that needs to be done in order to get the icons work.
  2. Add the following code to the functions.php in order to get the icon font work from frontend. Please, note, that you’ve added the needed font CSS in the corresponding folder located in your theme.

The code represented above allows to use FontAwesome 5 icons library for Elementor. After this quick manipulation, the icons will appear in the Icon Picker and will be displayed correctly on frontend. In the case you want to use another icon font, you can add it as well the same way.

As you can see, adding custom icons from icons library doesn’t really need any kind of coding skills. This can be done by anyone without ever breaking a sweat.

Hoping you’ll enjoy using custom icons!

5 Comments

  1. Nick

    Not sure if this is broken.. doesn’t seem to be working. The “new” icons show up in the list but with a broken box instead of the icon. I can inspect and see that it’s loading the class “fas fa-angle-right” and it is linking to the new fontawesome style sheet… just doesn’t load the icon.

    1. Victoria Shirokova

      Hi! It seems that the icon font library is not added to allow the icons to be displayed on frontend. Have you added the icon font in the folder in the theme (e.g., assets/lib)?

  2. Michael

    Thanks for the code! It looks like this will only work on the front end though, the actual icon won’t appear in the drop downs in the builder simply because you can’t enqueue a CSS file there. Icon list only shows the text name. However, it works perfect on the front end, so cheers for that!

    1. Victoria Shirokova

      Hi! I’m glad that this helped with your project! As for the icon listed on backend, that’s a bit strange. My guess is that the library wasn’t connected at the moment, or there is a mismatch in icon prefixes (fas/fa etc). But this is only a guess, I’d recommend to try changing the prefix and see if this helps.

  3. Eleni

    Hi there!

    I used your code and it works in my child theme, BUT my child theme isn’t connecting and showing these changes in the parent. Any help would be greatly appreciated.

    Thanks!

    Eleni

Leave a Reply

Your email address will not be published. Required fields are marked *

Cheers!

Now You're One of Us!

Check Your E-mail & Follow The Steps

We use cookies to ensure the best experience for you on CrocoBlock. Please, accept the usage of cookies.