Font awesome icons in html form

问题:

I'd like to include font awesome icons in a html form(Like username and password text box).If I give it as a placeholder,it disappears as soon as I click the text box.I'd like to have it this way:The placeholder(Eg:"Username" as a text) should vanish as soon as I click the text box while the font awesome icon(Eg:User icon) shouldn't vanish when I click the text box.What should I do ?

回答1:

Try this:

<p class="wrapper"><input placeholder="&#61447; Username"></p>

CSS:

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

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

.wrapper:before {
    font-family: 'FontAwesome';
    color:red;
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

http://jsfiddle.net/jagmitg/0osgcoue/

---

EDIT: Here is an alternative (not within the input but it will so it will not go away.)

<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;
}

http://jsfiddle.net/jagmitg/xs459ab2/

You need to compromise on something!

回答2:

Just add the icons inside the labels for the fields?

<form>
    <label for="user">Username <i class="fa fa-camera-retro"></i></label><input type="text" name="user" placeholder="Username"/>
    <label for="pass">Password <i class="fa fa-futbol-o"></i></label><input type="password" name="password" placeholder="Password"/>
</form>

http://jsfiddle.net/mdzjer1o/