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

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.

  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.

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!

By Victoria Shirokova . https://crocoblock.com/