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

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" 这是来自 v 4.0.0 我不知道它在以前的版本中是如何完成的。我认为像以前的答案中提到的 addon 类，但这对我有用：

  <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

Answer 3

你的代码很好，Bootstrap 4 没有公开这个特性，但它实际上有类。您只需在“input-group addon”旁边添加“input-group-text”类即可。

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

Answer 4

也许这会对你有所帮助。

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

Answer 5

尝试将 font-awesome 的 css 链接放在 bootstrap 链接之前。