title: Adding font-awesome icon inside a input field when using simple-form
body: <p>I looked and used the solution for placing the font-awesome icons inside an input field box as outlined here.</p>
  
  <p><a href="https://stackoverflow.com/a/27602359">StackOverflow answer</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input name="txtName" id="txtName"&gt;
  &lt;span class="fa fa-user errspan"&gt;&lt;/span&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.errspan {
     float: right;
     margin-right: 6px;
     margin-top: -60px;
     position: relative;
     z-index: 2;
     color: gray;
  }
  </code></pre>
  
  <p>But it doesn't really work with simple-form as when you place the icon using css positioning, the icon would be in the wrong place when simple-form shows error messages below the fields themselves.</p>
  
  <p>So for example, if you position the icon to work in one state where it looks great when the error message is displayed like this.</p>
  
  <p><a href="https://i.stack.imgur.com/hlXUr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hlXUr.png" alt="simple-form errors displayed"></a></p>
  
  <p>It ends up being incorrect in another state, like this.
  <a href="https://i.stack.imgur.com/tcpjY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tcpjY.png" alt="enter image description here"></a></p>