How to set a size for the button iconElementor ? In this tutorial we will show you how to achieve this with custom CSS
Everyone should be happy if they have the freedom/flexibility to create something because more flexibility means more productivity. Speaking of flexibility, in this article we will show you how to set custom size on button icon. Elementor.
Discover How to install Elementor on WordPress
By default, the button widget Elementor can customize icon size. But this choice is limited to five fixed option sizes (extra-small, small, medium, large and extra-large). Not only limited to five selected options, but the setting is not individual. This means that 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 custom size for Elementor button icon? ”. Well, anything is possible with Elementor. Without the help of add-ons, you can do it easily.
How to Set Elementor Button Custom Icon Size
Before starting this tutorial, we want to let you know that this tutorial will work with Elementor's custom CSS. Custom CSS functionality is only available on Elementor Pro.
Well, let's get started!
Go to your Elementor editor. We're going to start everything from scratch, so create a section with just one column. Next, please select the button widget from the widget panel, then drag and drop it into the editing area.
Read also: Elementor: How to Create Custom Shapes
Once you have added the button widget, you can edit and style the widget according to your preferences. 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 size of the icon only by setting it on the Size option of widget settings, it will also affect the text.
Ok, now we will solve this problem. On the widget settings, navigate to the tab Advanced -> Custom CSS.
Copy the CSS snippet below and then paste it into the field Custom CSS.
selector .elementor-button-icon { font-size:100px; color: inherit;
}
selector .elementor-button-text {margin:auto;}
You can customize the icon size by changing the CSS snippet value (see image below).
There!. Don't forget to save or publish your project if you wish.
Get Elementor Pro Now!!!
Conclusion
This article shows you how to set custom size of Elementor button icon using custom CSS. But, if you want an easier way to customize your button icon size because you don't like working with codes, we suggest using a Elementor add-on.
The Elementor addon that we highly recommend is JetElements by Crocoblock. JetElements has over 40 Elementor widgets. You will find a button widget that allows you to customize the size of the button icon.
With the widget Button from JetElements, customizing the button icon size is very simple and seamless.
So ! That's it for this article that shows you how to set a size for Elementor's button icon. If you have any concerns about how to get there let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
