html 形式的字体真棒图标答案

【问题标题】：Font awesome icons in html formhtml 形式的字体真棒图标
【发布时间】：2014-09-07 17:21:48
【问题描述】：

我想在 html 表单中包含字体很棒的图标（如用户名和密码文本框）。如果我将它作为占位符，它会在我单击文本框时消失。我想要这样：占位符（例如：“用户名”作为文本）应该在我单击文本框后立即消失，而当我单击文本框时字体真棒图标（例如：用户图标）不应该消失。应该我愿意吗？

【问题讨论】：

你能给我们一个你迄今为止尝试过的实际例子吗？（直接代码或 jsfiddle 链接）
这是我试过的代码：

用户名：

标签： html css forms

【解决方案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/

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

【讨论】：

这个可行，但我希望在我的文本框中有图标，即使用户输入（或输入后）输入..

【解决方案2】：

只需在字段的标签内添加图标？

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

【讨论】：