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

我认为您要寻找的是课程 "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 3

也许这会对你有所帮助。

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

尝试在bootstrap链接之前插入font-awesome的css链接。

Answer 5

您的代码很好，Bootstrap 4没有公开此功能，但实际上其中包含类。您只需要在“ 输入组插件”旁边添加类“ 输入组文本”即可。

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

字体真棒图标输入组内场

5 个答案:

CODEPEN