Inclure les polices génial à l'intérieur de saisie de type texte

Im essayant d'inclure une Police Impressionnant à l'intérieur de mon entrée dans le côté gauche, mais Im pas avoir de succès. Je n'ai jamais utilisé impressionnant de polices à ce purporse. Il ya quelqu'un sait comment faire pour inclure la police à l'intérieur de l'entrée? Merci!

La police Im essayant d'inclure dans la partie gauche de mon entrée:

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

Mon code html:

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

</form>

Mon 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;    
    }
Voulez-vous que l'icône de rester là pendant que l'utilisateur entre dans leur e-mail?
Merci pour votre réponse, et oui je veux!

OriginalL'auteur John23 | 2014-03-20

  1. 13

    Ceci peut être réalisé avec un absolu positioninig. Il existe deux façons différentes, je pense, de le faire donc je vais vous montrer à la fois. Jouer avec les deux exemples ici

    Méthode 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;
}

    Méthode 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;
}
    Merci homme..ça marche!!! J'ai besoin d'étudier la position relative et fixe, parce que je ne comprenais belle encore! Encore une fois merci pour votre aide 🙂

    OriginalL'auteur Jrod

  2. 2

    I le but de ce :

    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/

    OriginalL'auteur Anyone_ph