字段内的字体真棒图标输入组

Question

我不能让此图标位于字段内，我只能使其位于上方或下方：

<div class="form-group">
            <label for="inputFirstName">First Name</label>
            <div class="input-group">
              <div class="input-group addon">
                <i class="fa fa-user">
                </i>
                <input type="text" class="form-control" id="inputFirstName">
              </div>
            </div>
          </div>

.form-group i{
  color: #ccc;
  float: right;
  margin-right: 6px;
  position: relative;
  z-index: 2;
}

我已经尝试阅读这里的几乎所有帖子，但我感到非常沮丧。

Answer 1

我想你要找的是类"input-group-prepend"This is from v 4.0.0我不知道它在以前的版本中是如何完成的。我认为使用前面答案中提到的插件类，但这对我有用：

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

这是一个form包含 3 个input字段的完整演示：

     <form>
        <div class="form-group">
          <div class="input-group input-group-lg">
            <div class="input-group-prepend">
            <span class="input-group-text"><i class="fa fa-user"></i></span>
            </div>
              <input type="text" class="form-control" placeholder="Name">
          </div>
        </div>
        <div class="form-group">
          <div class="input-group input-group-lg">
            <div class="input-group-prepend">
            <span class="input-group-text"><i class="fa fa-envelope"></i></span>
              </div>
            <input type="email" class="form-control" placeholder="Email">
          </div>
        </div>
        <div class="form-group">
          <div class="input-group input-group-lg">
            <div class="input-group-prepend">
            <span class="input-group-text"><i class="fa fa-pencil"></i></span>
          </div>
            <textarea class="form-control" placeholder="Message" rows="5"></textarea>
          </div>
        </div>
        <input type="submit" value="Submit" class="btn btn-outline-info btn-block btn-lg">
     </form>

……最后的结果是：

Answer 2

您可以使用这样的input-group-addon类：

<div class="form-group">
  <label for="inputFirstName">First Name</label>
  <div class="input-group">
    <div class="input-group addon">
      <span class="input-group-addon" id="basic-addon1"><i class="fa fa-user"></i></span>
      <input type="text" class="form-control" id="inputFirstName">
    </div>
  </div>
</div>

<div class="form-group">
  <label for="inputFirstName">First Name</label>
  <div class="input-group">
    <div class="input-group addon">
      <input type="text" class="form-control" id="inputFirstName">
      <span class="input-group-addon" id="basic-addon1"><i class="fa fa-user"></i></span>
    </div>
  </div>
</div>

CODEPEN