DEV Community

Cover image for How to Change Icon Size on Elementor Button Widget
Aliko Sunawang
Aliko Sunawang

Posted on

How to Change Icon Size on Elementor Button Widget

#wordpress #css #elementor #webdev

Table Of Contents

Elementor lacks styling options for buttons. You can't even change the icon size.

Since most Elementor users don't have CSS knowledge (because it is marketed as a no-code web builder), I assume there are many users who seek a solution to resize the button icon. And I will cover it in this post.

First thing first. The Elementor button icon has the CSS class selector of elementor-button-icon.

If you know CSS, you can use the selector to resize the icon using the scale function on the transform property. You can place your code anywhere on your website.

If you have no CSS knowledge at all, then you can follow the step-by-step tutorial below:

Elementor Pro

First, add the Button widget to your design and add the icon you like. You can use the default icons that Elementor offers or custom icons (SVG) from websites like SVG Repo and Bootstrap Icons.

Adding an icon on Elementor Button widget

Next, go to the Advanced tab and open the Custom CSS block. Then, type the following code in the CSS editor box.

Adding the code snippet

The code:

selector .elementor-button-icon{
    transform: scale(1.5);
}
Enter fullscreen mode Exit fullscreen mode

You can replace the number inside the brackets according to the size of the icon you want. You can enter either an integer or decimal.

A little note. If you use a custom SVG file for your icon, you need to directly target the SVG element. So, your code should look like this:

selector .elementor-button-icon svg{
    transform: scale(1.5);
}
Enter fullscreen mode Exit fullscreen mode

Elementor Free

Since Elementor Free doesn't allow you to write CSS code directly on a widget, you need to use another path.

There are two paths that you can use for this matter. First, you can use the HTML widget. Second, you can use WordPress Theme Customizer and place your code on the Additional CSS block.

In this post, I will show the first path because it's the easiest one.

Start by adding the Button widget and adding the icon. Once everything is in place, add the HTML widget. You can place it anywhere on your page.

Elementor HTML widget

Then, write the following code in the editor.

CSS code in HTML widget

The code:

<style>
    .my-custom-icon .elementor-button-icon{
    transform: scale(1.5);
}
</style>
Enter fullscreen mode Exit fullscreen mode

Next, select the Button widget and go to the Advanced tab. Paste the CSS class of my-custom-icon to the CSS Classes field.

CSS code in HTML widget

Same as Elementor Pro, you need to add the svg selector on your code if you use a custom SVG file for your icon.

Prebuilt Button Templates

If you are interested, I have created several pre-built button hover effects for Elementor. You can use them on both Elementor Free and Pro.

Download the Button Hover Effects

Top comments (0)