Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Customize the Genesis Search Box with Icon Fonts: http://rickrduncan.com/wordpress/genesis-search-box-dashicons
<?php
//* Do NOT include the opening php tag
//* Enqueue FontAwesome. Note that the current version in the code is 4.5.0. Update as necessary.
//* https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
//* https://fortawesome.github.io/Font-Awesome/icons/
<?php
//* Do NOT include the opening php tag
add_action( 'wp_enqueue_scripts', 'b3m_enqueue_styles' );
function b3m_enqueue_styles() {
wp_enqueue_style( 'fa', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css', array(), '4.5' );
}
//* Customize Genesis search form input button text
add_filter( 'genesis_search_button_text', 'b3m_search_button_text' );
function b3m_search_button_text( $text ) {
return esc_attr( '&#xf002;' );
}
.search-form {
position: relative;
}
.search-form > input {
padding-left: 40px;
}
.search-form input[type="submit"] {
background: none !important;
border: none;
clip: inherit;
color: #4a545a;
display: inline-block;
font-family: 'FontAwesome';
font-size: 28px;
height: 38px;
padding: 0 10px 0 12px;
position: absolute;
left: 2px;
top: 12px;
vertical-align: top;
width: 38px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment