search icon inside search box

Question

So what I have right now is this:

But I want to include icon-search ICON SEARCH inside the textbox on the left side.

This is my code:

<form class="navbar-form pull-left form-search">
    <select>
        <option>Search patient by...</option>
        <option name="fname">Firstname</option>
        <option name="fname">Lastname</option>
        <option name="fname">Last follow up</option>
    </select>
    <div class="input-append">
        <input data-provide="typeahead" data-items="4"  type="text" 
           class="span2 search-query">
        <button class="btn">Search</button>
    </div>
</form>

So any ideas how to achieve this? Thanks.

Answer 1

<input data-provide="typeahead" data-items="4"  type="text" class="search-query">

.search-query{
   background: url(../images/your_pic.format) no-repeat left ;
}

Just add that image as background aligned left with no-repeat