खोज आइकन

Question

तो क्या मैं अभी यह है:

लेकिन मैं बाईं ओर पाठ बॉक्स के अंदर आइकन-खोज ICON SEARCH शामिल करना चाहते हैं।

यह मेरा कोड:

<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> 

तो किसी भी विचार कैसे इस लक्ष्य को हासिल करने के लिए? धन्यवाद। गठबंधन के रूप में पृष्ठभूमि के साथ छोड़ दिया

Answer 1

चेक इस Fiddle

<form class="navbar-form pull-left form-search"> 
    <div class="input-append"> 
    <input data-provide="typeahead" data-items="4" type="text" class="span2 search-query" style="background:url(http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png) no-repeat -38px 9px"> 
    <button class="btn">Search</button> 
    </div> 
</form> 

आप अन्य आइकन को भी दिखा सकते हैं देख सकते हैं। आपको अपने टेक्स्टबॉक्स के लिए अलग "खोज छवि" का उपयोग करना होगा।

Answer 2

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

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

बस उस चित्र को जोड़ने नहीं दोहराने

Answer 3

आप की तरह कुछ कर सकते हैं:

HTML:

<form class="navbar-form pull-left form-search"> 
<div class="input-append"> 
    <i class="icon-zoom-in"></i> 
     <input data-provide="typeahead" data-items="4" type="text" 
      class="span2 search-query"> 
     <button class="btn">Search</button> 
    </div> 
    </form> 

सीएसएस:

.icon-zoom-in 
{ 
    position:relative; 
    left:20px; 
    top:-8px; 
    z-index:999; 
} 

इसे आजमाएं: http://refork.com/xb70