Create a Divi Button with no Text

| button module icons

Boost Your Site and Save 20% this Weekend

Join 50,000 users and build a better site with 20% off all Divi Booster plugins.

Get My Discount Now!

Discount applied at checkout. Offer ends Monday!

Day(s)

Hour(s)

Minute(s)

Second(s)

The Divi theme comes with a Button module which lets you create buttons with text and an optional icon. But what if you just want the icon, but no text. Here's how to achieve that.

Create an Icon-only Button

By default, Divi won't display an button which has no text, or whose text is just blank spaces .

To create a button with an icon, but no text:

1. Add the following PHP code to allow buttons with no text to be displayed anyway:

add_filter('et_pb_module_shortcode_attributes', 'dbcAllowEmptyButtonText', 10, 3);

function dbcAllowEmptyButtonText($props, $atts, $render_slug) {
	if ($render_slug !== 'et_pb_button') return $props;
	if (!is_array($props)) return $props;
	if (!empty($props['button_text'])) return $props; 
	$props['button_text'] = ' '; 
	return $props;
}

Related Post: Adding PHP to the Divi Theme

2. Add a button with an empty text field, like so:

3. Configure the button icon to show at all times. To do so, set:

Button Settings > Design > Button > Use Custom Styles for Button = Yes
Button Settings > Design > Button > Show Button Icon = Yes
Button Settings > Design > Button > Only Show Icon On Hover for Button = No

4. Select your icon, at:

Button Settings > Design > Button > Button Icon

5. Equalize the padding round the icon by setting the left and right padding to 16px, at:

Button Settings > Design > Spacing > Padding

6. Make some final adjustments in the icon's custom CSS, by setting:

Button Settings > Advanced > Custom CSS > After

To:

margin-left: 0 !important;
position: relative;

Like so:

7. Save and view the page on the front-end and you should see the result:

Notes:

The button may not show properly in visual builder / may prove easier to edit using Divi's wireframe mode.
Here's a post from Elegant Themes that achieves a similar result in a different way – by changing the text of the button to itself be the icon.

This post may contain referral links which may earn a commission for this site

More Divi Tips

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

Download Divi Booster

2 Comments

Pieter on September 13, 2022 at 9:45 am

Thanks! For some reason my button looks like this: https://prnt.sc/Ip003wpr2zR4
What should I change?
Reply
- dan on September 13, 2022 at 1:30 pm
  
  Hey Pieter, it looks like a couple of changes are needed to get this to work correctly in the latest version of Divi (setting the icon position to relative and setting padding on the button). I've updated the post to break the steps down in more detail and include these changes. I hope it helps, but let me know if not. Thanks!
  Reply