title: How to put fa fa icons inside my input text box?
body: <p>I am trying to put a fa fa icon inside the input text box in my Angular 4 project. I tried other Stack Overflow answers, but they did not work for me. The coding I used is as follows:</p>
  
  <pre><code> &lt;div class="form-group has-feedback"&gt;
  &lt;input class="form-control "  name="UserName"  type="text"   placeholder="username"&gt;&lt;span class="fa fa-user form-control-feedback"&gt;&lt;/span&gt;
   &lt;/div&gt;
   &lt;div class="form-group has-feedback"&gt;
   &lt;input class="form-control "  name="PassWord"  type="password" placeholder="password"&gt;&lt;span class="fa fa-lock form-control-feedback"&gt;&lt;/span&gt;
   &lt;/div&gt; 
  </code></pre>
  
  <p>The output comes like this:</p>
  
  <p><img src="https://i.stack.imgur.com/edX5d.jpg" alt="Click here to see my output"></p>
  
  <p>But I want icons within text box:</p>
  
  <p><img src="https://i.stack.imgur.com/QzVDU.jpg" alt="Click here to see actual expected output"></p>