How to put fa-search inside a HTML input text box?

Question

I have a search box which gives the names from database as something is typed in the input box.The search icon, when clicked gives all the data from database for that particular name.Now I want that search icon to be within the text box and not outside..what should I do?

HTML:

<div class='col-md-6'>
<label for='search' class='control-label col-md-4'> Search</label>
<div class='col-md-4'>
[![enter image description here][1]][1]<input autocomplete="off" type="text" ng-model="patName" id="patName" placeholder="Patient Name" class="form-control" min-length="4" uib-typeahead="pat.pName as pat.pName for pat in patients($viewValue)" typeahead-editable="false" >
<input type="hidden" id="patientId"  min-length="4" ng-model="AddqueryArr.patient" value="{{pat.pName}}">

</div>
<div class='col-md-2'>

<a href>
<i class='fa fa-search' id="myimage" ng-click='getnames(AddqueryArr.qfrom,patName.pName)'></i></a>
<br>
</div>

You have to put background to input element. Check here: http://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form — user5455130, Oct 28 '15 at 12:01

score 3 · Accepted Answer · answered Oct 28 '15 at 12:03

You can position an icon with just a few lines of custom CSS:

.search-icon {
    position: absolute;
    top: 50%;
    right: 25px;
    margin-top: -10px;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

<br><br><br>

<div class="col-md-4">
    <input autocomplete="off" type="text" ng-model="patName" id="patName" placeholder="Patient Name" class="form-control" min-length="4" uib-typeahead="pat.pName as pat.pName for pat in patients($viewValue)" typeahead-editable="false" />
    <input type="hidden" id="patientId" min-length="4" ng-model="AddqueryArr.patient" value="{{pat.pName}}" />
    <a href="#" class="search-icon">
        <i class="fa fa-search" id="myimage" ng-click="getnames(AddqueryArr.qfrom,patName.pName)"></i>
    </a>
</div>

score 1 · Answer 2 · answered Oct 28 '15 at 12:01

Answer which you need from Bootstrap Documentation.

You can also add optional feedback icons with the addition of .has-feedback and the right icon.

<div class="form-group has-feedback">
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="fa fa-search" aria-hidden="true"></span>
</div>

score 0 · Answer 3 · answered Oct 28 '15 at 12:02

try this -

<div class="col-md-4" style="padding-left: 0px;">               
   <div class="input-prepend-inner pull-left" >
     <span class="add-on"><i class="fa fa-search"></i></span>
     <input ng-model="" class="searchInput col-md-7" placeholder="">
  </div>
</div>

.add-on {
 position: absolute;
 top: 3px;
 left: 8px;
 z-index: 100;
}
.searchInput {
  padding-left: 33px;
}

How to put fa-search inside a HTML input text box?

3 Answers3