Include font awesome inside input type text

Question

I´m trying to include a Font Awesome inside my input in left side but I´m not having sucess. I never used awesome fonts to this purporse. Anyone there knows how to include the font inside the input? Thanks!

The font Im trying to include in 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;    
    }

Do you want the icon to remain there while the user enters in their email? — Jared, Mar 20 '14 at 23:33

score 13 · Accepted Answer · answered Mar 21 '14 at 14:52

This can be achieved with some absolute positioninig. There are two different ways I can think of doing this so I will show you both. Fiddle 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;
}

Thanks man..it works! I need to study the position relative and fixed because I didnt understand nice yet! Thank you one more time for your help :) — John23, Mar 22 '14 at 02:45

score 2 · Answer 2 · answered Sep 06 '15 at 12:37

I purpose 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/

Include font awesome inside input type text

2 Answers2