Add Bootstrap Glyphicon to Input Box

Without Bootstrap:

We'll get to Bootstrap in a second, but here's the fundamental CSS concepts in play in order to do this yourself. As beard of prey points out, you can do this with CSS by absolutely positioning the icon inside of the input element. Then add padding to either side so the text doesn't overlap with the icon.

So for the following HTML:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

You can use the following CSS to left and right align glyphs:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Demo in Plunker

css screenshot

Note: This presumes you're using glyphicons, but works equally well with font-awesome.

For FA, just replace .glyphicon with .fa

With Bootstrap:

As buffer points out, this can be accomplished natively within Bootstrap by using Validation States with Optional Icons. This is done by giving the .form-group element the class of .has-feedback and the icon the class of .form-control-feedback.

The simplest example would be something like this:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Pros:

Includes support for different form types (Basic, Horizontal, Inline)
Includes support for different control sizes (Default, Small, Large)

Cons:

Doesn't include support for left aligning icons

To overcome the cons, I put together this pull-request with changes to support left aligned icons. As it is a relatively large change, it has been put off until a future release, but if you need these features today, here's a simple implementation guide:

Just include the these form changes in css (also inlined via hidden stack snippet at the bottom)
_{*LESS: alternatively, if you are building via less, here's the form changes in less}

Then, all you have to do is include the class .has-feedback-left on any group that has the class .has-feedback in order to left align the icon.

Since there are a lot of possible html configurations over different form types, different control sizes, different icon sets, and different label visibilities, I created a test page that shows the correct set of HTML for each permutation along with a live demo.

Here's a demo in Plunker

feedback screenshot

P.S. frizi's suggestion of adding pointer-events: none; has been added to bootstrap

Didn't find what you were looking for? Try these similar questions:

Add Twitter Bootstrap icon to Input box
Put search icon near textbox bootstrap

Addition CSS for Left Aligned feedback icons

.has-feedback .form-control {  padding-right: 34px;}.has-feedback .form-control.input-sm,.has-feedback.form-group-sm .form-control {  padding-right: 30px;}.has-feedback .form-control.input-lg,.has-feedback.form-group-lg .form-control {  padding-right: 46px;}.has-feedback-left .form-control {  padding-right: 12px;  padding-left: 34px;}.has-feedback-left .form-control.input-sm,.has-feedback-left.form-group-sm .form-control {  padding-left: 30px;}.has-feedback-left .form-control.input-lg,.has-feedback-left.form-group-lg .form-control {  padding-left: 46px;}.has-feedback-left .form-control-feedback {  left: 0;}.form-control-feedback {  line-height: 34px !important;}.input-sm + .form-control-feedback,.form-horizontal .form-group-sm .form-control-feedback {  width: 30px;  height: 30px;  line-height: 30px !important;}.input-lg + .form-control-feedback,.form-horizontal .form-group-lg .form-control-feedback {  width: 46px;  height: 46px;  line-height: 46px !important;}.has-feedback label.sr-only ~ .form-control-feedback,.has-feedback label.sr-only ~ div .form-control-feedback {  top: 0;}@media (min-width: 768px) {  .form-inline .inline-feedback {    position: relative;    display: inline-block;  }  .form-inline .has-feedback .form-control-feedback {    top: 0;  }}.form-horizontal .has-feedback-left .form-control-feedback {  left: 15px;}

Bootstrap with glyphicon in input box

instead of mentioning glyphicon as in your code:

<span class="input-group-addon glyphicon glyphicon-envelope"></span>

write it as:

<span class="input-group-addon">
  <i class="glyphicon glyphicon-envelope"></i>
</span>

example is here CODEPEN

enjoy.. :)

How to include the glyphicon within input field?

Have managed to solve it from the given link: With optional icons

<div class="form-group has-feedback">  <label for="firstname" class="col-sm-2 control-label">Date & Time</label>  <div class="col-sm-4">    <input type="text" class="form-control" id="Date" name="Date" placeholder="Date">    <span class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></span>  </div>  <div class="col-sm-4">    <input type="text" class="form-control" id="Time" name="Time" placeholder="Time">    <span class="glyphicon glyphicon-time form-control-feedback" aria-hidden="true"></span>  </div></div>

bootstrap - insert glyphicon next to input

Just change your 2nd selector to

input-group-unstyled .input-group-addon:last-child {
    ...

Fiddle - https://jsfiddle.net/o1x3ubab/

Icon in bootstrap 4 inside the input

You don't need to have the icon inside the input- you can place it next to the input field, and remove the input field's border using CSS.

HTML:

<div class="input-group">
<i class="fa fa-user-circle-o"></i>
<input type="text" class="form-control" placeholder="Enter Name Here" >
</div>

CSS:

input{
  border:none;
  background-color: transparent;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.fa-user-circle-o{
  color: gray;
}

Updated fiddle:
https://jsfiddle.net/5db2ho62/2/

Add Bootstrap Glyphicon to Input-Group with TextBox & Button

I was able to accomplish this by manually setting wraping the glyphicon in a and manually the style of the glpyhicon right.

here is it working: https://jsfiddle.net/kuxxm9fb/

and here is the code itself:

<form class="form-inline" role="form">
</br>
<div class="input-group has-feedback">
<label class="control-label" for="inputSuccess4"></label>
<input type="text" class="form-control" id="inputSuccess4">
    <span class="form-control-feedback glyphicon glyphicon-ok" id="extGuestGlyphiconOK" style="right: 45px"></span>
            <span class="input-group-btn">
         <a class="btn btn-default" id="lookupGuest" href="#">link</a>
    </span>
</div>   
</form>