When creating websites, icon boxes are really helpful. The parts that list features of goods or services are used the most frequently used aspect of icons. The symbol, the headline, and the description are just a few of the many ways you can personalize this widget that is shown. In this Elementor tutorial, we are going to walk you through creating a clickable icon box and even adding more custom icons to your library. But before setting your icon box, be sure to read about the best practices for making an icon box clickable below.
Table of Contents
How To Add Icon Box In Elementor
Step 1: Search for the icon box widget from the menu bar on the left side of your screen. Drag it to the section
Step 2: Make your icon design unique. In the icon library, select the icon you want.
View: Set the icon’s view to “Default,” “Stacked,” or “Framed.” Framed refers to a frame encircling the icon, whereas stacked refers to a background.
Title and Description: Give your Icon Box widget a title and a description.
Link: Add a link and specify whether you want it to open in a new window.
Icon Position: Choose whether to place the icon on the box’s left, top, or right side (on Mobile view it will stay centered)
Title HTML Tag: Choose an H1–H6 tag, Div, Span, or P for the title.
Step 3: Style Tab
You may design “Icon” and “Content” in the “Style” section.
Icon > Normal
Primary Color: A secondary color will be available if you select a stacked or framed icon box.
Icon Spacing: The space between the icon and the heading.
Icon Size: Scale up and down the size of the icon.
Icon Rotate: Rotate the icon.
Icon > Hover
For the hover of the icon, decide on the primary and secondary colors.
Animation – Choose from a long list of animations for the hover.
Content
Alignment: Left, centers, right or justified.
Vertical Align: Top, middle, and button.
Title > Spacing: Set the distance between the description and the title.
Color: Change the color of the title.
Typography: Make the title’s typography unique.
Description
Color: Change the color of the description.
Typography: Choose custom to change the typography, just like with the title.
Step 4: Click on “Advanced” to learn more about the options if you want to add motion effects, happy effects, a background, or to make it responsive and more captivating. Elementor comes with the “Advanced” feature by default. Read this document to learn more about advanced features and their applications.
The stunning icon box will appear on your website after you press the “Publish” button.
Adding Custom Icon Libraries in Elementor
So Elementor’s default icon library are free Font Awesome 5 and 6 icons. There are quite a few. But sometimes you just aren’t happy with the icons in the default library. Well the cool thing about Elementor is that they let you upload even more icon libraries. Here are several more ways to add even more icons to your Elementor icon library.
1. If you have a Font Awesome Pro subscription
Step 1: Go to your site’s Admin Dashboard > Elementor > Settings > Integrations
Step 2: Scroll down to Font Awesome Pro and enter in your Kit ID and then save changes
Now when you edit your page and go to choose your icons, Font Awesome Pro families will show up for you.
2. Uploading custom Fontello, IcoMoon, and Fontastic icon packs
Step 1: Go to your site’s Dashboard > Elementor > Custom Icon
Step 2: Upload a zip file of your custom icon pack
So Fontello, IcoMoon, and Fontastic are services that let you import custom images to make icons. Then you can save them as a zip file and upload them to your site and it will be in your icon library.
3. Use third-party plugin icon packs
So there are third-party plugins that offer icon packs. Some of these plugins would be Exclusive Addons or Skyboot.
What you do is download the plugin and install it like you would any other plugin.
Step 1: WordPress dashboard > Plugin > Add New
Alternative way: If you can’t install it in the WordPress dashboard (because the file size of the icon pack is too big), you can upload it directly via File Manager in your Cpanel (or whatever backend software you are using). If you don’t know how to do that, you can follow the instructions in the video below.
Best Practices for Your Clickable Icon Box
Because icons are SVG files, you can change a lot of things about it, like the color and size without having to directly edit the icon in any third-party software.
So if you want your visitors to click on your icon, the same rules apply for creating a high-converting icon as it is for making a high-converting button. In short, you have to make it stand out from the rest of the page. That means it has to be a high-contrast color and has to stand out from the colors of the rest of the page. If the icon blends in with the rest of the page, it’s not good.
Another good idea is to make the icon big enough to see, on all screens (desktop, mobile, and tablet).
There should be enough spacing between the icon and the text too so that it is easily clickable. This is especially important on mobile where screen real estate is sparse.
