title: Bootstrap font awesome in textbox not working properly with label
body: <p>I have a bootstrap form in which i have used text boxes with the label and it is not working properly. If i removed the font awesome icon which is inside the span tag it is working properly this is my html </p>
  
  <p><a href="https://i.stack.imgur.com/nrnBP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nrnBP.png" alt="bootstrap font awesome"></a></p>
  
  <pre><code>            &lt;form&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="formGroupExampleInput"&gt;Example label&lt;/label&gt;
        &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-user fa-fw"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="formGroupExampleInput2"&gt;Another label&lt;/label&gt;
      &lt;input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I want to do something like this <a href="https://i.stack.imgur.com/VNt6E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VNt6E.png" alt="final image"></a></p>
  
  <p><a href="https://jsbin.com/quxodidebi/edit?html,js,output" rel="nofollow noreferrer">https://jsbin.com/quxodidebi/edit?html,js,output</a></p>