In this tutorial, I’m going to show you how to replace the Divi search button with an icon on the Divi search module

The tutorial is simple and easy to implement, as there is just a little CSS that you will need to add to your Divi website for this to work.

Replacing Divi Search Button With an Icon

First, you will need to add the Divi Search Module to the page you want it on. Then, open up the module settings and in the Advanced tab give it a CSS Class of db-icon-search then Save & Exit.

Then, Copy the CSS below and paste into your child theme stylesheet or Divi > Theme Options > Custom CSS.

• Go to Divi → Theme Options → General
• Add the following code to the Custom CSS field
• Click Save Changes

/*—————————————————————*/
/*——Replace the Divi Search Button with an Icon by Divi Banks——*/
/*—————————————————————*/

/*Hide the search button*/

.db-icon-search input.et_pb_searchsubmit,
.widget_search input#searchsubmit {
background: transparent;
color: transparent;
border: none;
width: 75px;
z-index: 2;
}

/*Add padding to the search input field*/

.db-icon-search input.et_pb_s,
.widget_search input#s {
padding-right: 75px !important;
}

/*Add the icon*/

.db-icon-search .et_pb_searchform:before,
.widget_search::before {
content: ‘\55’;
position: absolute;
font-family: ‘ETModules’;
z-index: 1;
right: 0;
font-size: 20px;
padding: 20px 20px;
}

/*—————————————————————*/
/*—End – Replace the Divi Search Button with an Icon by Divi Divi Banks—*/
/*—————————————————————*/

Pro Tip: How to Add CSS Code Snippets to the Divi Theme

Explaining the Code

The first part of the CSS Code is meant to “remove” the button background and text by actually changing their color to transparent. The button background and the text are not completely removed because we still need to use the built-in click function the button provides.

The code also removes the button border and adds a z-index so that the button (invisible) can sit on top of the icon.

The second part of the code is to add the right padding to the search input field so any text entered doesn’t run into the new icon.

The third and the last part of the code is to help add the icon as

And finally, we add the icon as a virtual element, and set the font size, padding, and also z-index so it can sit underneath the invisible button, making it look like a user is clicking directly on the icon.

In this tutorial, I am using the built-in ETModules font but you can change this to Font Awesome or whatever you may want.

I hope that you enjoyed this tutorial. Subscribe to Divi Banks on YouTube and join our newsletter for more crisp content on WordPress and web design.