css - 如何在我的表单字段上添加 Font-Awesome 图标？

Question

我正在制作一个表格，我想使用 Font-Awesome我的输入字段上的图标。

这是我的 HTML 代码。

<div class="form-group">
    <span class="input-icon">
        <i class="fa fa-user"></i>
        <input class="form-control" name="username" placeholder="Username" type="text">
    </span>
</div>

我想在我的输入字段 上显示图标。目前它显示在我的输入字段上方。

Answer 1

有很多方法可以实现这一点。按照以下方法并根据需要进行调整。

span {
  position: relative; /* Helps curtail overlap */
  border: solid 1px #bbb;
  padding: 3px 5px 5px 25px; /* Adjust as needed */
}
span input {
  border: none;
}
span:before {
  content: '\f007';
  position: absolute;
  left: 5px;
  font-family: fontAwesome;
  color: #888; /* Your desired color */
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="input-icon">
        <input class="form-control" name="username" placeholder="Username" type="text">
                        </span>

See fontAwesome content value cheat sheet here.