title: Font Awesome icon inside text input element
body: <p>I am trying to insert a user icon inside username input field. </p>
  
  <p>I've tried one of the solution from the <a href="https://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css">similar question</a> 
  knowing that <code>background-image</code> property won't work since <a href="http://fortawesome.github.io/Font-Awesome/" rel="noreferrer">Font Awesome</a> is a font.</p>
  
  <p>The following is my approach and I can't get the icon display.</p>
  
  <pre><code>.wrapper input[type="text"] {
      position: relative;
  }
  
  .wrapper input[type="text"]:before {
      font-family: 'FontAwesome';
      position: absolute;
      top: 0px;
      left: -5px;
      content: "\f007";
  }
  </code></pre>
  
  <p>I have font face declared in the default font awesome css so I wasn't sure if adding font-family above was the right approach.</p>
  
  <pre><code> @font-face {
       font-family: 'FontAwesome';
       src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
       src: url('../Font/fontawesome-webfont.eot?#iefix&amp;v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
   }
  </code></pre>