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.
Want to add a premium vibe to your Elementor design? Use our button hover effects collection
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 GIF 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.
2 thoughts on “How to Set the Custom Size on the Elementor Button Icon”
Hi Laptopleon,
Thanks for visiting our site.
Regarding your question, you can modify the button icon size by adjusting the font-size value on the CSS snippet.
Each button may need a different value (font-size) to be able to display the same size on all buttons.
Thank you
I had exactly this problem: One of a series of buttons with svg icons was a custom made svg (in Adobe Illustrator, because there was no ready-made icon for that topic) and no matter what I tried, it would be displayed smaller than the others (that were part of the elementor set).
So my question is: How do you select that one button icon without resizing all icons? Because then they would still be differently sized.