How to Use Icons In Elementor (Including Inserting Into Text Editor and Uploading Custom Icons)

Facebook
Twitter
LinkedIn

Icons are a great visual tool to attract readers to a specific part of your text. The great thing about icons are that they are vector (SVG) files, so once you have the base icon, you can pretty much change the styling to whatever you want. So you can change the size, color, or any other styling attribute. 

In this Elementor tutorial, we will walk you through how to use icons in Elementor, including uploading your own custom icons and inserting your icons inside a block of text.

How To Add Icon In Elementor

Step 1: Find the icon widget

Drag and drop it to the page

Step 2: Set the Elementor Icon

1. Choose a Font Awesome icon from the icon library.

2. Click insert

3. From the view menu, choose between default, stacked, and framed.

4. Put in the link’s URL for the item.

5. Place the icon in left, center, or right alignment.

Step 3: Customize the Icon Styles

You can change the styles of the icon under the Style tab.

To customize the icon, under the icon menu there are normal and hover states.

3.1 Normal

1. Choose the icon’s primary and secondary colors.

2. Increase or decrease the icon’s size.

3. Rotate the icon.

3.2 Hover

1. Set the hover colors.

2. Set a hover state animation of your choosing.

3. Set the icon’s exact size.

4. Rotate the icon.

If you select Stacked or Framed view, you have the following options:

Step 1: Set the Elementor Icon

1. Select a Font Awesome icon from the icon library.

2. From the view menu, choose between stacked or framed.

3. Choose either a circle or a square for the shape of the stack or frame.

4. Put in the link’s URL for the item.

5. Place the icon in left, center, or right alignment.

Step 2: Customize the Icon Stacked or Framed Styles

To customize the icon, under the icon menu there are normal and hover states.

3.1 Normal

1. Choose the primary color (the background or frame) for the icon.

2. Choose the icon’s secondary color.

3. Set the icon size.

4. To change the size of the stack o frame, adjust the padding around the icon.

5. Rotate the icon 360 degrees.

6. Set the border radius to control the roundness of the stack or frame’s corners.

3.2 Hover

1. Choose the primary color (the background or frame) for the icon.

2. Choose the icon’s secondary color.

3. Select a hover animation effect, such as Grow, Pulse, Skew, etc.

4. Control the size of the stack or frame by adjusting the padding around the icon.

5. Rotate the icon 360 degrees.

6. Set the border radius to control the roundness of the stack or frame’s corners.

If you want to change the style of your icon, simply click the “advanced” option.

The following are the numerous available style options:

How to Place Icons Inside Elementor’s Text Editor

Since icons are their own element, using icons inside a text paragraph is not as simple as dragging the icon element inside the text editor.

However, putting icons inside a paragraph is possible, here’s how.

Step 1: Install the Font Awesome plugin and activate it

Step 2: Go to Font Awesome’s website

Step 3: Search for the icon you want and filter out by “FREE”

If you aren’t paying for a Font Awesome membership, then you need to filter out by free icons, or the icons won’t appear on your site.

Step 4: Click on the icon of your choice and copy the HTML code. The code should look something like this. The example below is an address card icon.

				
					<i class="fa-solid fa-address-card"></i>
				
			

Step 5: Changing the size and color

In the code below, I am changing the size of the address card icon. 

				
					<i class="fa-solid fa-address-card fa-2x"></i>
				
			

The extra sizing code is the fa-2x. You can change that number to a larger number if you want the icon to be bigger.

Here is how to change the color of the icon.

				
					<i class="fa-solid fa-address-card" style="#fc0303"></i>
				
			

In the example above, the #Fc0303 dictates the color of the icon.

Now if I want to change both size and color, I just combine the two codes above.

				
					<i class="fa-solid fa-address-card fa-2x" style="color:#fc0303"></i>
				
			

Step 6: Paste html code into text editor

Be sure you are pasting it into the “text” tab, which is the html tab of the text editor

So here is an example

And that code would produce this icon

Adding Custom Icons Into Elementor

If Elementor’s huge library just doesn’t do it for you, you can actually upload your own custom icons into Elementor. Here’s how to do that.

Step 1: Create your custom icon set at Fontello, IcoMoon, or Fontastic

Icons at its core are fonts, and also need to be in SVG format. The three sites above will enable you to create icons from any of your SVG images.

Step 2: Go to your dashboard and upload the zip file

Go to Elementor>Custom Icons and then click Add New

Share on Facebook
Tweet this article
Share on LinkedIn
Email this article

More to explorer