title: Bootstrap 3 Placing Icon inside input field
body: <p>I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box. </p>
  
  <p>My html looks like this:</p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
      &lt;div class='right-inner-addon col-md-2 date datepicker' 
           data-date-format="yyyy-mm-dd"&gt;
          &lt;input name='name' value="" type="text" class="form-control date-picker"
                 data-date-format="yyyy-mm-dd"/&gt;
          &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried <code>position: absolute</code> like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>.right-inner-addon i {
      position: absolute;
      right: 5px;
      top: 10px;
      pointer-events: none;
      font-size: 1.5em;
  }
  .right-inner-addon {
      position: relative;
  }
  </code></pre>
  
  <p>But when I do it will look great in one spot, but will not be positioned correctly in another instance.</p>
  
  <p>I have also tried to see if I could use <code>text-indent</code> to see if this would work throughout, but it had the same effect.</p>
  
  <pre class="lang-css prettyprint-override"><code>.right-inner-addon i, 
  .form-group .right-inner-addon i {
      display: inline-block;
      z-index: 3;
      text-indent: -15px;
      font-size: 1.3em;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ztS4t/" rel="noreferrer"><strong>Here's a jsFiddle that might help</strong></a></p>