Search

How to Set Custom Icon Size on Divi Button Module

Divi Builder provides extensive customization options, allowing you to create visually appealing websites. One of its versatile modules is the Divi Button module. This module enables to design of attractive and functional buttons. The addition and fusion of the button text and icon are one of the module’s standout features.

But with all the benefits this module offers, we found a slight issue; by default, we can’t change the size of just the icon. This means changing the button size will impact both elements (text and icon) by default. This tutorial will show you how to solve that issue.

Steps to Set Custom Icon Size on Divi Button Module

Step 1: Add the Custom CSS

First, we will add a custom CSS to the Divi Theme. On your WordPress dashboard, go to Divi -> Theme Options. Once you enter the Divi Theme Options page, navigate to the General tab -> Custom CSS section.

Copy the CSS snippet below and paste it into the Custom CSS field.

#page-container #bigger-icon:before,
#page-container #bigger-icon:after { 
	font-size: 2em !important;
	line-height: 0.8em !important;
    margin-left: 0.1em;
	text-align: level;
}
#page-container #bigger-icon:hover { 
	padding-left: 2em !important; 
}

The Code Explanation:

This CSS code defines styles for the element (Button module) with CSS ID “bigger-icon" and its pseudo-elements (:before and :after) when they are within the page-container element. The styles include font size, line height, margin, and text alignment.

When the bigger-icon element is hovered over; it will have additional left padding. The !important keyword prioritizes these styles, overriding any conflicting styles from other CSS rules.

Once you add the CSS snippet into the Custom CSS field, apply the changes by clicking the Save Changes button.

Step 2: Add the Button Module

Well, it’s time to move on to the next step. Go to your Divi Builder editor, and we will start everything from scratch, so create a section with a single column, select the Button module, and insert that module into the column. Edit and style up your module as you prefer.

On your module settings panel, go to the Design tab -> Button. Here we will apply some changes below:

  • Enable the option of Use Custom Styles For Button.
  • Add an icon on the Button Icon library.
  • Place the button icon to the right of the text (after the button text).
  • Turn off the option of Only Show Icon On Hover for Button.

Next, add the custom CSS ID to the Button module you want to customize the button icon. On your module settings panel, navigate to the Advanced tab -> CSS ID & Classes. Afterward, add “bigger-icon” to the CSS ID input field.

That’s it. Once you add the custom CSS ID, you have successfully set the custom icon size of the Divi Button module, and now your button has a hover effect while you hover over it.

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

Note: Feel free to adjust the property values on the CSS snippet to achieve the desired button appearance, such as the font size, line height, etc.

The Bottom Line

By following these steps, you may alter the appearance of your buttons, particularly the icon, to create aesthetically appealing designs that match your website’s style. Experiment with various icon sizes, heights, margins, and alignments to achieve the ideal button appearance.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.