How to add an icon on the right side of Bootstrap input?

Question

I have a snippet code:

<div class="container" style="margin: 50px">
  <div class="form-group">
    <span class="fa fa-search form-control-icon"></span>
    <input type="text" class="form-control" placeholder="Search">
  </div> 
</div>

.form-group .form-control {
    padding-left: 2.375rem;
}

.form-group .form-control-icon {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

How to change the current CSS to have the icon on the right side?

Seems padding-right: 2.375rem; is not sufficient.

Answer 1

Since you are using position absolute, you need to define the parent element as position:relative.

Also you need to define the right and top position for it to fix.

.form-group .form-control {
    padding-left: 2.375rem;
}
.form-group{
  position:relative;
}
.form-group .form-control-icon {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
    right:0;
    top: 0px;
}

Working jsfiddle link https://jsfiddle.net/47up2sax/

Answer 2

You should use the right property with the appropriate value to move it to the right. Check this fiddle (I used 'x' as for some reason the icon was not loading in the fiddle).