search button customization

Hello,

I’m trying to customize the search button within the header with a custom icon.

Also I don’t want the hover effect i’ve set for the menu to be present on the search button.

Below the custom css i have:

#header{
margin: 0 auto;
}

#geodir_wrapper {
max-width: 1140px;
width: 100%;
}

/* menu top */
#mobile-navigation-left ul li a, .whoop-login-btn {
display: block;
padding: 0px;
text-decoration: none;
border-radius: 3px;
font-size: 15px;
font-weight: normal;
color: #58585B;
margin-left: 20px !important;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}

#mobile-navigation-left ul li a:hover{
color: #fff;
}

#footer .widget-title {
width: 100%;
color:#ff0000;
}

/* search from header */
.geodir-search {
padding-left:30px;
}
.header-right-area .widget .geodir-search input[type=”text”] {
margin-right: 5%;
}

/* sign up button*/
.whoop-signup-btn {
border: 0px;
background: #54BC27 linear-gradient(#54B11C 4%, #57B715 5%, #4EAB16 100%) repeat scroll 0% 0%;
}
.whoop-btn-primary {
text-shadow: 0px -0px 0px #000 !important;
}
/*titlu widgets*/
.widget-title {
color:#108407 !important;
font-family:Calibri, Tahoma, sans-serif;
padding-bottom:20px;

}
/*Reviewer content*/
.geodir_reviewer_content { margin:10px; }
.geodir_reviewer_author {
color:#000000;
font-family:Tahoma, sans-serif;
size:20px;
font-weight:bold; }
.geodir_reviewer_reviewed{ color:#a0a0a0; }
.geodir_reviewer_title { color:#108407 !important; font-weight:bold; }
.geodir_reviewer_text { font-size: 16px !important;}
.comment_excerpt {color:#108407 !important; font-size: 12px !important;}

.geodir-content {
font-family:Verdana, sans-serif;
size:14px;
}
.geodir-entry-title {
font-weight:bold; color:#108407 !important;
}
.excerpt-read-more{color:#108407 !important; font-size: 12px !important;}
.footer #widget-footer{border-bottom:0px !important;}

Let me know if you need anything else,

Regards,
Kira