Want updates & exclusive offers?

Hey there!

How to replace the Divi search button with an icon

How to replace the Divi search button with an icon

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…

Replace the Divi Search Button with an Icon

To something like this…

Replace the Divi Search Button with an Icon

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.

 

Replace the Divi Search Button with an 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.

 

Replace the Divi Search Button with an 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

Pro Pass Membership

Want access to all current and future Divi child themes, theme kits, and Canva kits for one low annual price?

Learn how to create Divi Child Themes that sell

Divi child theme course - Reloaded!
  • Use your existing industry knowledge to define and harness your niche
  • Productise your business with affordable website solutions for clients
  • Add a new revenue stream to your business that pays while you sleep
Find out more
Divi Child Theme Course
Are you

Struggling with Divi?

Struggling with Divi?

Hey! I want to make sure the content I create is helpful to the wider Divi community. If there's something you always find difficult to do when creating Divi sites, or a styling option you wish Divi had, complete the Divi tutorial request form and tell me all about it. I don't guarantee I'll be able to create something that solves the issue, but I'm smarter than your average bear so you never know!

P.S. - This is NOT a support request form and you won't be subcribed to any email lists. If you have an issue with one of our products, you can get help here.



First
Why? I might have questions, and if I create a solution I'll let you know.

Want a website like ours?

More posts

You might like!

3 ways to use anchor links in Divi

3 ways to use anchor links in Divi

Anchor links are used to navigate to specific content on a page rather than simply between pages themselves, and mastering anchor links in Divi is actually very simple. In this tutorial, I’m going to show you three ways to use anchor links.

3 ways to use anchor links in Divi

How to add titles to the Divi gallery slider

The Divi Gallery module allows you to display image titles and captions when using the grid layout, but not when using the slider. There is a very simple way to grab your titles and display them over your images while still allowing the lightbox feature to function. In this tutorial I’m going to show you how.

You have Successfully Subscribed!