#footer-widgets .footer-widget a,#footer-widgets .footer-widget li a,#footer-widgets .footer-widget li a:hover{color:#ffffff}.footer-widget{color:#ffffff}.et_slide_in_menu_container,.et_slide_in_menu_container .et-search-field{letter-spacing:px}.et_slide_in_menu_container .et-search-field::-moz-placeholder{letter-spacing:px}.et_slide_in_menu_container .et-search-field::-webkit-input-placeholder{letter-spacing:px}.et_slide_in_menu_container .et-search-field:-ms-input-placeholder{letter-spacing:px}@media only screen and (min-width:1350px){.et_pb_row{padding:27px 0}.et_pb_section{padding:54px 0}.single.et_pb_pagebuilder_layout.et_full_width_page .et_post_meta_wrapper{padding-top:81px}.et_pb_fullwidth_section{padding:0}}	h1,h2,h3,h4,h5,h6{font-family:'PT Sans',Helvetica,Arial,Lucida,sans-serif}body,input,textarea,select{font-family:'PT Sans',Helvetica,Arial,Lucida,sans-serif}.ds-icon-search input.et_pb_searchsubmit,.widget_search input#searchsubmit{background:transparent;color:transparent;border:none;width:55px;z-index:2}.ds-icon-search input.et_pb_s,.widget_search input#s{padding-right:55px!important}GET DIVI!
SEARCH …
Q19:REPLACE THE DIVI SEARCH BUTTON WITH AN ICON
icon search
by Michelle | Apr 17,2018 | Quick Snacks | 4 comments
Q19:Replace the Divi Search Button with an Icon
I have been using this effect a lot in my child themes lately so thought I would share it with you in a Quick Snack smile
Today I am going to show you how to replace the search button with an icon,on both the Divi search module and also the default search widget.
There really isn’t much to it,just a little CSS. Here is what it will look like (with no additonal styling).
Search...
So let’s get cooking!
INGREDIENTS
The Divi Theme from Elegant Themes
COOKING TIME
Less than 5 minutes!
PREPARATION
All we need to do is add the Search Module to a page,open up the module settings and in the Advanced tab give it a CSS Class of ds-icon-search then Save & Exit.
Replace the Divi Search Button with an Icon
There is nothing you really need to do for the search widget,it is added as default on posts when not using the Divi Builder,our CSS will take care of the rest.
LIKE OUR FREE CONTENT? THEN YOU'LL LOVE OUR EXCLUSIVE CLUB!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

FIND OUT MORE
METHOD
 

Now for our CSS, here is what we are doing:

First we make the button background and text colour transparent, we do this rather than remove it so that we can still use it’s built in click function. We also remove the border, set a width and add a z-index so our ‘invisible’ button will sit on top of our icon.

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

Next we add some right padding to the search input field so any text entered doesn’t run into our new icon.

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

And finally, we add the icon as a pseudo element, set the font size, padding and also the z-index so it sits underneath our invisible button, thus making it look like we are clicking directly on the icon. I am using the built in ETModules font but you can change this to Font Awesome or whatever you may have integrated.

.ds-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: 8px 20px;
}
 

Copy the complete CSS from the toggle below and paste into your child theme stylesheet or Divi > Theme Options > Custom CSS.

COMPLETE CSS
/*---------------------------------------------------------------*/ 
/*------Replace the Search Button with an Icon by Divi Soup------*/ 
/*---------------------------------------------------------------*/
/*Hide the search button*/
.ds-icon-search input.et_pb_searchsubmit,
.widget_search input#searchsubmit {
    background: transparent;
    color: transparent;
    border: none;
    width: 55px;
    z-index: 2;
}
/*Add padding to the search input field*/
.ds-icon-search input.et_pb_s,
.widget_search input#s {
    padding-right: 55px !important;
}
.ds-icon-search .et_pb_searchform:before,
.widget_search::before {
    content: '\55'!important;
    position: absolute;
    font-family: 'ETModules';z-index:1;right:0;font-size:20px;padding:8px 20px}.et-l--header .et_builder_inner_content{overflow-x:visible}.et-l--header .et_builder_inner_content{overflow-y:visible}.et_pb_section_0_tb_header.et_pb_section{padding-top:0px;padding-bottom:0px;background-color:RGBA(0,0,0,0)!important}.et_pb_row_0_tb_header,body #page-container .et-db #et-boc .et-l .et_pb_row_0_tb_header.et_pb_row,body.et_pb_pagebuilder_layout.single #page-container #et-boc .et-l .et_pb_row_0_tb_header.et_pb_row,body.et_pb_pagebuilder_layout.single.et_full_width_page #page-container #et-boc .et-l .et_pb_row_0_tb_header.et_pb_row{width:100%}.et_pb_row_0_tb_header{align-items:center}.et_pb_image_0_tb_header .et_pb_image_wrap img{min-height:37.2px;width:auto}.et_pb_image_0_tb_header{margin-bottom:1px!important;margin-left:15px!important;width:89.5%;text-align:left;margin-left:0}.et_pb_menu_0_tb_header.et_pb_menu{background-color:#ffffff}.et_pb_menu_0_tb_header{padding-bottom:4px;margin-bottom:-12px!important}.et_pb_menu_0_tb_header.et_pb_menu .nav li ul{background-color:#ffffff!important}.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu,.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu ul{background-color:#ffffff!important}.et_pb_menu_1_tb_header .et_pb_menu_inner_container>.et_pb_menu__logo-wrap .et_pb_menu__logo,.et_pb_menu_1_tb_header .et_pb_menu__logo-slot{width:auto;max-width:100%}.et_pb_menu_0_tb_header .et_pb_menu_inner_container>.et_pb_menu__logo-wrap .et_pb_menu__logo,.et_pb_menu_0_tb_header .et_pb_menu__logo-slot{width:auto;max-width:100%}.et_pb_menu_0_tb_header .et_pb_menu_inner_container>.et_pb_menu__logo-wrap .et_pb_menu__logo img,.et_pb_menu_0_tb_header .et_pb_menu__logo-slot .et_pb_menu__logo-wrap img{height:auto;max-height:none}.et_pb_menu_1_tb_header .et_pb_menu_inner_container>.et_pb_menu__logo-wrap .et_pb_menu__logo img,.et_pb_menu_1_tb_header .et_pb_menu__logo-slot .et_pb_menu__logo-wrap img{height:auto;max-height:none}.et_pb_menu_1_tb_header .et_pb_menu__icon.et_pb_menu__search-button,.et_pb_menu_1_tb_header .et_pb_menu__icon.et_pb_menu__close-search-button{color:#7EBEC5}.et_pb_menu_1_tb_header .mobile_nav .mobile_menu_bar:before{color:#7EBEC5}.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__cart-button{color:#7EBEC5}.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before{color:#7EBEC5}.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__search-button,.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__close-search-button{color:#7EBEC5}.et_pb_menu_1_tb_header .et_pb_menu__icon.et_pb_menu__cart-button{color:#7EBEC5}.et_pb_row_1_tb_header{background-color:#034ea2;max-width:none!important}.et_pb_row_1_tb_header.et_pb_row{padding-top:0px!important;padding-bottom:10px!important;margin-top:10px!important;margin-right:auto!important;margin-left:auto!important;padding-top:0px;padding-bottom:10px}.et_pb_menu_1_tb_header.et_pb_menu ul li a{font-size:15px;color:#FFFFFF!important}.et_pb_menu_1_tb_header.et_pb_menu{background-color:#034ea2}.et_pb_menu_1_tb_header{margin-top:10px!important;margin-bottom:0px!important}.et_pb_menu_1_tb_header.et_pb_menu ul li.current-menu-item a{color:#FFFFFF!important}.et_pb_menu_1_tb_header.et_pb_menu .nav li ul{background-color:#034ea2!important}.et_pb_menu_1_tb_header.et_pb_menu .et_mobile_menu,.et_pb_menu_1_tb_header.et_pb_menu .et_mobile_menu ul{background-color:#034ea2!important}.et_pb_row_0_tb_header.et_pb_row{padding-top:6px!important;padding-right:3px!important;padding-bottom:22px!important;margin-right:4px!important;margin-bottom:-17px!important;margin-left:auto!important;margin-left:auto!important;margin-right:auto!important;padding-top:6px;padding-right:3px;padding-bottom:22px}@media only screen and (min-width:981px){.et_pb_row_1_tb_header,body #page-container .et-db #et-boc .et-l .et_pb_row_1_tb_header.et_pb_row,body.et_pb_pagebuilder_layout.single #page-container #et-boc .et-l .et_pb_row_1_tb_header.et_pb_row,body.et_pb_pagebuilder_layout.single.et_full_width_page #page-container #et-boc .et-l .et_pb_row_1_tb_header.et_pb_row{width:100%}}@media only screen and (max-width:980px){.et_pb_column_2_tb_header{overflow-x:hidden}}@media only screen and (max-width:767px){.et_pb_row_1_tb_header,body #page-container .et-db #et-boc .et-l .et_pb_row_1_tb_header.et_pb_row,body.et_pb_pagebuilder_layout.single #page-container #et-boc .et-l .et_pb_row_1_tb_header.et_pb_row,body.et_pb_pagebuilder_layout.single.et_full_width_page #page-container #et-boc .et-l .et_pb_row_1_tb_header.et_pb_row{width:100%}}.et_pb_section_0_tb_footer.et_pb_section{padding-top:30px;padding-bottom:8px;background-color:rgba(0,0,0,0.03)!important}.et_pb_image_0_tb_footer{margin-right:-16px!important;width:49.9%;text-align:left;margin-left:0}.et_pb_image_0_tb_footer .et_pb_image_wrap img{width:auto}.et_pb_image_1_tb_footer .et_pb_image_wrap img{width:auto}.et_pb_image_2_tb_footer .et_pb_image_wrap img{width:auto}.et_pb_row_1_tb_footer.et_pb_row{padding-bottom:0px!important;padding-bottom:0px}.et_pb_text_0_tb_footer{font-size:15px}.et_pb_image_1_tb_footer{margin-top:-29px!important;margin-right:32px!important;margin-bottom:-15px!important;text-align:left;margin-left:0}.et_pb_text_1_tb_footer{font-size:15px;padding-bottom:3px!important}.et_pb_image_2_tb_footer{padding-bottom:0px;margin-right:220px!important;width:35%;text-align:left;margin-left:0}.et_pb_text_2_tb_footer{font-size:15px;padding-bottom:0px!important}.et_pb_row_2_tb_footer{border-top-width:1px;border-top-color:#c6c6c6}.et_pb_row_2_tb_footer.et_pb_row{padding-top:42px!important;padding-bottom:0px!important;margin-top:15px!important;margin-right:auto!important;margin-bottom:13px!important;margin-left:auto!important;padding-top:42px;padding-bottom:0px}.et_pb_text_3_tb_footer{margin-top:-24px!important;margin-bottom:-29px!important}@media only screen and (max-width:980px){.et_pb_row_2_tb_footer{border-top-width:1px;border-top-color:#c6c6c6}}@media only screen and (max-width:767px){.et_pb_row_2_tb_footer{border-top-width:1px;border-top-color:#c6c6c6}}.et_pb_section_0.et_pb_section{padding-bottom:2px;background-color:#ff7700!important}.et_pb_row_0.et_pb_row{margin-top:-42px!important;margin-right:auto!important;margin-left:auto!important}.et_pb_row_1.et_pb_row{margin-top:-42px!important;margin-right:auto!important;margin-left:auto!important}.et_pb_row_0{text-align:center;align-content:center}.et_pb_row_1{text-align:center;align-content:center}.et_pb_text_0.et_pb_text{color:#FFFFFF!important}.et_pb_text_0 h1{color:#FFFFFF!important}.et_pb_text_1.et_pb_text{color:#FFFFFF!important}.et_pb_text_0{text-transform:uppercase;letter-spacing:1px;text-align:center;align-content:center;color:white}.et_pb_text_1{padding-top:4px!important;padding-bottom:2px!important;text-align:center;align-content:center;color:white}.et_pb_section_1.et_pb_section{padding-top:0px;padding-bottom:109px}.et_pb_blurb_0.et_pb_blurb .et_pb_module_header,.et_pb_blurb_0.et_pb_blurb .et_pb_module_header a{font-family:'PT Sans Caption',Helvetica,Arial,Lucida,sans-serif;font-weight:700;font-size:35px;color:#034ea2!important}.et_pb_blurb_0.et_pb_blurb{padding-top:0px!important;padding-bottom:0px!important;margin-top:65px!important;margin-bottom:24px!important}.et_pb_blurb_0 .et_pb_blurb_content{text-align:left;max-width:100%}.et_pb_blurb_0.et_pb_blurb .et_pb_image_wrap{margin:auto auto auto 0}.et_pb_divider_0{width:20%}.et_pb_divider_0:before{border-top-color:#ff7700;border-top-width:3px}.et_pb_row_3{min-height:141.7px}.et_pb_row_3.et_pb_row{padding-bottom:0px!important;padding-left:2px!important;margin-top:-25px!important;margin-right:auto!important;margin-left:auto!important;padding-bottom:0px;padding-left:2px}.et_pb_image_0{width:100%;max-width:100%!important;text-align:left;margin-left:0}.et_pb_image_0 .et_pb_image_wrap,.et_pb_image_0 img{width:100%}