Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active February 8, 2022 20:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save srikat/9395249 to your computer and use it in GitHub Desktop.
Save srikat/9395249 to your computer and use it in GitHub Desktop.
Magnifying glass icon font using Dashicons for Search button in Genesis. http://sridharkatakam.com/add-magnifying-glass-icon-font-using-dashicons-search-button-genesis/
//* Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );
function enqueue_dashicons() {
wp_enqueue_style( 'dashicons' );
}
//* 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( '' );
}
//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
return esc_attr( 'Search' );
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */
.search-form {
position: relative;
}
.search-form input[type="submit"] {
position: absolute;
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'dashicons';
vertical-align: top;
clip: inherit;
width: 20px;
height: 20px;
background: transparent;
color: #999;
right: 10px;
top: 17px;
}
.search-form input[type="submit"]:hover {
color: #F15123;
}
.site-header .search-form {
width: 189px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment