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/

文章来源: Font awesome icons in html form