Replace “Search” button in WordPress with a Font Awesome font

2 Views

Sorry if this is a stupid question.

I am using WordPress 4.0 with Bootstrap 3.0 and I have just included Font Awesome via the functions.php file. Everything is working fine (I’ve used the icons for social media etc).

Read More

Now, I want to change the “Search” button in the sidebar to a Font Awesome icon (a search icon, instead of button+text). The code in the file wp-includes/general-template.php looks like this: 

    <label>
        <span class="screen-reader-text">' . _x( '', 'label' ) . '</span>
        <input type="search" class="search-field" placeholder="' . esc_attr_x( '', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( '', 'label' ) . '" />
    </label>
    <input type="submit" class="search-submit" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />

I want just an input field with the icon next to it, like so: 

    <label>
        <span class="screen-reader-text">' . _x( '', 'label' ) . '</span>
        <input type="search" class="search-field" placeholder="' . esc_attr_x( '', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( '', 'label' ) . '" />
    </label>
    <i class="fa fa-search"></i>

But yeah, this is not working… If I click on the icon, nothing happens. I have tried to put the i class etc into where now is esc_attr_x( ‘Search’, but that didn’t help either.

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. You need a “submit” type of input to send the search request. You could do that by putting your icon element instead of the search text, like so:

    <input type="submit" class="search-submit">
    <i class="fa fa-search"></i>
</input>

    However, editing WP core files is a very bad idea. You will loose your changes with the next update you do. Instead, make a file called searchform.php in your theme folder and put the entire search form there.

  2. Just implemented this in a theme I am working on. The most important thing to remember is that there is no reason why you cant change up the HTML for your searchform as you will see:

    <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
    <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />  
</label>
    <button type="submit" class="search-submit"><span class="fa fa-search"></span></button>

    I replaced the default wordpress input with the class submit with a button (this way wordpress wont add in it’s default submit text). The main thing is the button is a submit type.

  3. You could do something like so:

    <input class="search" type="submit" value="&#xf002" >

    Or

    <button class="search" type="submit">&#xf002</button>

    CSS

    .search{
 font-family: "Font Awesome 5 Pro";
}