如何在表单字段上添加Font-Awesome图标?

时间:2015-02-16 17:18:10

标签: css css3 twitter-bootstrap-3 font-awesome

我正在制作表单,我想在输入字段中使用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>

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

3 个答案:

答案 0 :(得分:5)

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

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.

答案 1 :(得分:1)

使跨度相对,图标绝对定位。

.input-icon {position: relative; display: inline-block;}
.input-icon .fa {position: absolute; left: -30px; top: 0;}

答案 2 :(得分:0)

你正在使用Font-Awesome和Bootstrap 3,所以use the standard pattern

有一个&#34;分歧&#34;在Font-Awesome和Bootstrap之间关于图标的放置,但正如上面的链接所提到的,更改图标<span>

<span class="fa fa-user form-control-feedback" aria-hidden="true"></span>

<span class="form-control-feedback" aria-hidden="true">
    <i class="fa fa-user"></i>
</span>

解决了这个问题。