Divi allows icons to be added to the button module. By default the size of these icons is set by the height of the button text. Here is how to change the size of these icons.
Increasing the Button Text Size
A crude, but simple, way to increase the icon size is to increase the button text size. This increases both the button text size and the icon size. If that is what you want to do, you can change the button text size by going into the "Design" tab of the Button Module Settings and adjusting the "Button Text Size" option found under the "Button" subheading.
Changing the Button Icon Size using CSS
If you want to change the size of just the icon, leaving the button text at its usual size, you can do so with some CSS code. First, under the "Advanced" tab of your button module, set a value for the CSS ID. In this example I'll use "mybutton".
Now add the following CSS to Divi (e.g. in the "Divi > Theme Options > General > Custom CSS" box):
#page-container #mybutton:before,
#page-container #mybutton:after {
font-size: 2em !important;
line-height: 0.9em !important;
}
#page-container #mybutton:hover {
padding-left: 3em !important;
}Related Post: Adding CSS to the Divi Theme
If applied to the default button settings, this will increase the icon size and add make the button a bit wider to accommodate it. Changing the "font-size" value will adjust the height of the button, while changing the "line-height" value will adjust the vertical positioning of the icon (which you may need to do to ensure the icon is vertically centered if you select a different height).
The "padding-right" value is what increases the width of the button, so adjust it as necessary. If you have your icon placed on the left, you'll need to change this to "padding-left".
If you have your icon set to always be visible (not just on hover), change "#page-container #mybutton:hover" to just "#page-container #mybutton".
Want get more out of Divi?
Hundreds of new features for Divi
in one easy-to-use plugin
0 Comments