html - html 形式的 Font Awesome 图标

Question

我想在 html 表单中包含很棒的字体图标(如用户名和密码文本框)。如果我将它作为占位符，它会在我单击文本框后立即消失。我想要它是这样的:当我单击文本框时，占位符(例如:“用户名”作为文本)应该消失，而当我单击文本框时， Font Awesome 图标(例如:用户图标)不应该消失。什么应该我有吗？

Answer 1

试试这个:

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

---

编辑:这是一个替代方案(不在输入中，但它不会消失。)

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

你需要在某些事情上妥协!