how to add an icon on search form placeholder in bootstrap by default its showing search

Question

I'm using the bootstrap theme for my wordpress site. My problem is that in my navbar the search form is showing the placeholder as search and I want to change it, that's why I change the searchform.php file at this line but nothing is changing.

Here is the form.php:

<form method="get" id="searchform" class="form-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s" class="assistive-text hidden"><?php _e( 'Search', 'the-bootstrap' ); ?></label>
<div class="input-append">
<input id="s" class="span2 search-query" type="search" name="s" placeholder="<?php esc_attr_e('Search', 'the-bootstrap' ); ?>"><!--
--><button class="btn btn-primary" name="submit" id="searchsubmit" type="submit"><?php _e( 'Go', 'the-bootstrap' ); ?></button>
</div>
</form>

I want to change the placeholder to an icon so should I have to change this line or anything else?

Answer 1

See if the answers @ Bootstrap navbar search icon might work for you.

The accepted answer from Alexey Ivanov has 3 variations of using an icon as background image in the input box. Since it's entirely CSS there should be no problem getting it to work for you with WordPress.

The second answer from user1769915 is a good example of how to use font-icons in the input box. The inportant bit is that they have added a span inside the placeholeder code

<input type="text" class="search-query span2" placeholder="Search&hellip;"><span class="fornav"><i class="icon-search"></i></span>

If you are using something like Font Awesome on your WordPress site, this should probably work well.

Hope this helps!