Combine text and font awesome icon inside of search form input box

[faith]

Hello,
I'm trying to combine text and a Font Awesome down arrow inside of a Search Form input box . I've found lots of solutions for either or, but not both. Can you help?
Here's the code that's in functions.php and in my style.css. My down arrow is not displaying, and even if it did, how can I separate the font styles for the text and icon?

//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
return esc_attr( 'Type your city ...', '' );
}

.header-middle input {
color:#efe9dd;
border-radius:10px;
border:1px solid #efe9dd;
padding: 3px 12px 8px 12px;
}
.header-middle *::-moz-placeholder {
font-family: "myriad-pro-condensed",sans-serif;
font-size:20px;
}
.header-middle input:focus {
padding: 3px 12px 8px 12px;
font-family: "myriad-pro-condensed",sans-serif;
font-size:20px;
}
.header-middle input[type="search"] {
content: "\f107";
font-family: FontAwesome;
padding-right: 7px;
display: inline-block;
padding-left:30px;
}

[Victor Font]

This is what I use on my site:

//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {

	return esc_attr( 'Search this site…' );

}

//* Customize search form input button text
add_filter( 'genesis_search_button_text', 'sk_search_button_text' );
function sk_search_button_text( $text ) {

	return esc_attr( '' );

}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[faith]

Oh wow that worked! Thank you SOOO much Victor. I also found out how to style the button (font awesome icon). First I put a position: relative on the .search-form. Then, I did this.....

input[type="submit"] {
border: 0;
color:#efe9dd;
display:inline-block;
font-family: 'FontAwesome';
font-size:20px;
padding:0;
background-color:transparent;
position: absolute;
left: 170px;
top:10px;
}

[Victor Font]

Glad you figured it out.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts