If you want to add search capability to your website, the Divi Search module is an excellent solution. However, the default design includes a button with the “Search” text, which may not always match your preferred style.
This article will walk you through a simple method for removing the text and replacing it with the icon on your Divi Search module; giving you a cleaner and more streamlined search bar design.
Steps to Remove the Text and Replace it with the Icon on the Divi Search Module
Step 1: Add the Search Module
Go to the Divi Builder by creating a new post type (page/post) or selecting the existing one. Afterward, add the Search module to the canvas area, and then you can tweak and style up your Search module as you like.
- Turn off the “Show Button” option
To replace the text with an icon on the Search module, you need to hide the button by turning off the “Show Button” option.
Under the Content tab on the module settings, navigate to the Elements section, then switch the available toggle to NO.
- Add the CSS class
By adding a CSS class to a specific element (Search module), you can target that module with your CSS code and style it independently without affecting the overall design.
Add this CSS class wpp-search-icon to your Search module (Advanced tab -> CSS ID & Classes -> CSS Class).
Step 2: Add the Custom CSS
Next, we will add the CSS snippet to your site. You can add the CSS snippet to your Divi Theme Options page (Divi -> Theme Options-> Custom CSS) or your current page from the Page Settings. For this example, we will put the code in the Page Settings.
Go to the Page Settings (⚙️) -> Advanced tab. Afterward, copy the simple CSS snippet below and paste it into the Custom CSS input field.
.wpp-search-icon::after {
content: '\55';
font-family: ETModules;
font-size: 22px;
font-weight: 600;
color: #000000;
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%) scaleX(-1);
pointer-events: none;
z-index: 99;
}
.wpp-search-icon .et_pb_searchsubmit {
z-index: 100;
}
What the Code Does?
The above CSS code adds a search icon (🔍) to a Search module with the CSS class wpp-search-icon. We got the icon from the ETMODULES.
ETMODULES is Divi’s built-in icon collection that uses specific Unicode characters to represent these icons and applies to styles like color and font-weight to make them stand out. Read here to learn more about Divi’s built-in icon collection and how to insert Unicode into the CSS snippet.
The CSS snippet above also defines the icon’s appearance (font, size, and color), positions it within its container, and ensures it doesn’t interfere with the functionality of the submit button.
You can change the icon’s appearance by editing the property values in that CSS snippet according to your preference.
That’s it. Don’t forget to save or publish your project if you want to.
The Bottom Line
With a few simple steps and some custom CSS, you can transform your Divi Search module by replacing the default button with a sleek and stylish icon. This approach creates a more modern and visually appealing search experience for your website visitors.
To make the icon blend in with your website’s design, you can further customize its appearance by adjusting its size, positioning, color, etc.
