How to Replace Divi Search Button With an Icon

by | Sep 16, 2022 | Blogging Tips | 0 comments

Divi Search Icon

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.

divi search module icon

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

  • Go to DiviTheme OptionsGeneral
  • 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.

About Patrick

About Patrick

Editorial Manager

Patrick is a web designer for hire and an avid WordPress user. He loves sharing new tips on WordPress, blogging, and web design as a whole. Patrick is the guy behind Divi Banks. You can connect with him on Instagram at @lumumba_pl.

Leave a Response!

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our Privacy Policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let’s have a personal and meaningful conversation.


Submit a Comment

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

You may also like

How To Reduce Bounce Rate: 6 Ways That Actually Work

How To Reduce Bounce Rate: 6 Ways That Actually Work

Bounce rate is significant when it comes to search engine ranking since a bad bounce rate tells the search engine crawlers that your web page isn't helpful. If it isn't helpful, then what is the point of ranking it higher on the search engine results pages (SERPs)? In...