I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box. 

My html looks like this:

```
<div class="col-md-12">
    <div class='right-inner-addon col-md-2 date datepicker' 
         data-date-format="yyyy-mm-dd">
        <input name='name' value="" type="text" class="form-control date-picker"
               data-date-format="yyyy-mm-dd"/>
        <i class="fa fa-calendar"></i>
    </div>
</div>

```

I have tried `position: absolute` like this:

```css
.right-inner-addon i {
    position: absolute;
    right: 5px;
    top: 10px;
    pointer-events: none;
    font-size: 1.5em;
}
.right-inner-addon {
    position: relative;
}

```

But when I do it will look great in one spot, but will not be positioned correctly in another instance.

I have also tried to see if I could use `text-indent` to see if this would work throughout, but it had the same effect.

```css
.right-inner-addon i, 
.form-group .right-inner-addon i {
    display: inline-block;
    z-index: 3;
    text-indent: -15px;
    font-size: 1.3em;
}

```

[**Here's a jsFiddle that might help**](http://jsfiddle.net/ztS4t/)