html - Font Awesome icon inside text input element

Question

I am trying to insert a user icon inside username input field.

I've tried one of the solution from the similar question knowing that background-image property won't work since Font Awesome is a font.

The following is my approach and I can't get the icon display.

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "f007";
}

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.

 @font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&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');
 }

Answer 1

Output:

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(Or)

Output:

HTML:

<div class="input-wrapper">
     <input type="text" />
 </div>

CSS:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: 'f274';
        position: absolute;
        right: 6px;
    }
</style>