Today I am going to show you how to replace the Divi search button with an icon in the search module.

There really isn’t much to it, just a little CSS, but we’re going to add it in such a way that if you later decide you want to use the button instead, you can just activate it in the module without having to change any of the CSS

So we go from something like this…

To something like this…

Add the search module.

Add the search module to a page or theme builder layout, open up the module settings and in the Advanced tab give it a CSS Class of bb-search-icon.

You’ll want to style your button in the Button Text toggle in the Design tab in case later you want to enable the button. Once you’re happy with how that looks, disable the button in the Elements toggle in the Content tab, then head back to the Spacing toggle in the Design tab.

There is some default padding already included and you can leave that or adjust the first three values as you wish. In the right padding box, change the spacing to around 40-45px. This will ensure that when a user types in their search term, the text won’t run over the icon.

I would suggest at this point, if you’re planning to add your search module to more than a single page or theme builder template, you create a preset so you can speed up styling and make all your search modules adopt a cohesive style. Once you’re happy, save and exit the module.

Add a little CSS.

In your child theme style sheet, or Divi > Theme Options > Custom CSS if you aren’t using a child theme, add the following CSS.

.bb-search-icon::after {
    content: '\55';
    font-family: ETModules;
    font-size: 20px;
    color: #000;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) scaleX(-1);
    pointer-events: none;
    z-index: 9;
}

.bb-search-icon .et_pb_searchsubmit {
    z-index: 10;
}

Here’s what we’re doing:

• Content and font-family properties grab the search icon from the built in Divi icon library
• Font-size and color are self explanatory (I hope 😉 )
• Position allows us to freely move the position of the icon with the following:
  • Top moves the icon down into our search box
  • Right gives us a little spacing to the right, especially important for aesthetics if you have a border on your search module
  • Transform – translateY adjusts the vertical position of the icon so it sits bang in center of our search box. ScaleX flips the icon so it’s facing the other way. This value is optional, but personally I really don’t like the icon facing right.
• Pointer-events – With this property, we’re preventing the icon from being clickable. It isn’t clickable, but it’s just a safety fallback in case ET make changes in future releases that may affect functionality.
• z-index sets our icon to show underneath the button. This is so if we choose to enable the button later, it will display on top of the icon, thus hiding the icon so we don’t have to change any CSS. (You’ll have to also set a solid background colour for the button in both its static and hover states.)
• The z-index in the second CSS declaration makes sure our button will sit on top of the icon in the event we enable it again.

Now save and view on the front end. Voilà.

That’s it, all done!

Michelle x