Replace search button with fa icon

  • Resolved woody2016

    (@woody2016)


    7 years, 2 months ago

    Hello, wondering if anyone can help please?

    I would like to change the search submit button called for by <?php get_search_form(); ?> to use an fa icon. I have tried several things including the css:

    .search-form input[type=”submit”] {
    content: “\f179”;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    /* font: normal 30px/1 ‘dashicons’; */
    vertical-align: middle;
    background: none;
    border: none;
    padding-left: 20px;
    font-family: FontAwesome;
    width: 60px;
    }

    This changes the background and text but does not show the icon. Was wondering if Quark handles the naming differently to my css reference ‘content: “\f179″;’ ?

    I see in the Quark documentation that fa icons can be added using <i></i> tags, don’t think i can use this in this instance. Have considered creating a new form by copying into my functions file ‘the get_search_form()’ code from the wordpress code reference site and renaming it then calling it. But not sure what to change, i was also looking into a filter to change the icon but got stuck.

    I referenced:

    <input type=”submit” class=”search-submit” value=”‘. esc_attr_x( ‘Search’, ‘submit button’ ) .'” />

    add_filter( ‘search-submit’, ‘search-submit-icon’ );
    function search-submit-icon( $text ) {
    return esc_attr_x( ‘’ );
    }

    but this keeled over my site so removed it!

    Any ideas would be great, thanks in advance

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    If you want to make a search field that uses a fontawesome icon for the button, then simply do the following:

    Create a searchform.php file in your child theme with the following…

    
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ) ?>">
	<label>
		<span class="screen-reader-text"><?php _x( 'Search for:', 'label' )?></span>
		<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" />
	</label>
	<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
</form>

    And add the following style to your stylesheet…

    
.search-form .search-submit {
	background-color: inherit;
	border: none;
}
    Thread Starter woody2016

    (@woody2016)

    Hello Anthony,

    Thank you very much for taking the time to develop the code, it works a treat, I had previously created an image and used that over the original search button with CSS to make the original button elements transparent, but this form version is ideal! I can see that the button icon replace method will be useful for other things i have in mind.

    I see you have included the Screen reader echo which is great, I help a blind person who advises me on problems he has with his screen reader and websites.

    Still always learning here, your help is much appreciated.

    Nel

    Theme Author Anthony Hortin

    (@ahortin)

    Hi Nel,

    No problem! Apologies for the delay in getting back to you on this. Glad it’s all working for you though ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Replace search button with fa icon’ is closed to new replies.