Include awesome font inside input type text

Question

I am trying to include the awesome font inside my input on the left, but I have no success. I have never used amazing fonts for this purpura. Does anyone know how to include a font inside input? Thank!

The font Im trying to include in the left side of my input:

  <i class="fa fa-user"></i> 

My html:

<form action="" method="post">
       <input type="text"class="inputs" placeholder="e-mail" /> 
       <br />
       <input type="password" class="inputs"placeholder="Password"  />

</form> 

My css:

 inputs:-webkit-input-placeholder { 
        color:    #b5b5b5; 
    } 

    inputs-moz-placeholder { 
        color:    #b5b5b5; 
    } 

     .inputs  { 
        background: #f5f5f5; 
        font-family:"bariol_regularregular", Palatino, serif;
        -moz-border-radius: 3px; 
        -webkit-border-radius: 3px; 
        border-radius: 3px; 
        border: none; 
        padding: 13px 10px; 
        width:180px; 
        margin-bottom: 10px; 
        box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 ); 
        height:20px;
    } 

    .inputs:focus { 
        background: #fff; 
        box-shadow: 0px 0px 0px 2px #96842E; 
        outline: none;    
    } 

Answer 1

This can be achieved with some absolute position. There are two different ways I can do this, so I will show you both. The script with both examples here

Method 1

HTML

<label id="email-label">
    <input type="text" id="email" placeholder="email here" />
</label>

CSS

#email {
    padding-left: 20px;
}
#email-label {
    position: relative;
}
#email-label:before {
    color: #666;
    content:"\f007";
    font-family: FontAwesome;
    position: absolute;
    top: 2px;
    left: 5px;
}

Method 2

HTML

<label id="email-label2">
    <i class="fa fa-rocket"></i>
    <input type="text"id="email2" placeholder="email here" />
</label>

CSS

#email-label2 {
    position: relative;
}

#email-label2 .fa-rocket {
    color: #666;
    top: 2px;
    left: 5px;
    position: absolute;
}

#email2 {
    padding-left: 20px;
}

Answer 2

I use this:

HTML

<i class="inside fa fa-user"></i>
<input type="text" class="inp" placeholder="Your account" />

CSS

.inside {
position:absolute;
text-indent:5px;
margin-top:2px;
color:green;
}

.inp {
text-indent:20px;
}

https://jsfiddle.net/ga6j5345/1/