Create a Divi Button with no Text

|

The Divi Button module 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 .

One temporary way to work around this is to set the button text to be a HTML non-breaking space, i.e. entering "  " as the button text. In the current version of Divi this will work on first save of the page – the button will show up with a single space character (essentially showing no text). However, subsequent saves of the page in visual builder will cause the non-breaking space to be stripped out, affecting the buttons.

For a more permanent solution, we can use 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;
}
Now it's simply a matter of creating a button with no text, enabling an icon at all times, and doing some styling to get the icon looking right.

Here's the minimum settings to achieve an icon-only button with the icon properly centered:

And 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

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

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *