How to Set the Custom Size on the Elementor Button Icon

Updated: November 7, 2022

Everybody must be happy if they are given the freedom/ flexibility to create something because more flexibility means more productivity. Talking about flexibility, in this article, we will show you how to set the custom size on the Elementor button icon.

By default, the Elementor button widget can customize the icon size. But, the choice to set is limited to five fixed option sizes (extra-small, small, medium, large, and extra-large). Not only limited to five selected options size, but the setting isn’t individual. This means when you want to set the size, it will impact two elements of the button (icon and text).

Maybe you are wondering, “Is it possible to set the custom size on the Elementor button icon?”. Well, everything is possible in Elementor. Without the help of any add-ons, you can do that easily.

How to Set the Custom Size on the Elementor Button Icon

Before we start the tutorial, we want to inform you that this tutorial will work with Elementor custom CSS. The custom CSS feature is only available on Elementor Pro; ensure you’ve upgraded to the pro version.

Well, let’s get started!

Go to your Elementor editor. We will start everything from scratch, so create a section with a single column. Afterward, please select the button widget from the widget panel and then drag and drop it into the canvas area. Once you’ve added the button widget, you can edit and style up the widget to your preference. Such as adding an icon, text background color, etc.

As you can see from the image above, the icon and text sizes are the same. When you want to change the icon size only by setting it on the Size option on the widget settings, it will also impact the text (see the GIFF below).

Alright, now we will fix that issue. On the widget settings, navigate to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then paste it into the Custom CSS field.

selector .elementor-button-icon { font-size:100px; color: inherit;
}
selector .elementor-button-text {margin:auto;}

You can customize the icon size by editing the value on the CSS snippet (see the image below).

That’s it. Don’t forget to save or publish your project if you want to.

The Bottom Line

This article shows you how to set the custom size on the Elementor button icon using Custom CSS by Elementor. But, if you want a more straightforward way to customize your button icon size because you don’t like working with any codes, we suggest you use an Elementor add-on.

The Elementor add-on that we highly recommend to you is JetElements by Crocoblock. JetElements has 40+ Elementor widgets. In this case (customize button icon size), you need the Button widget.

With the Button widget from JetElements, customizing the button icon size is very simple and seamless.

Screenshot of the JetElements Button widget settings

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.