文本框中的Bootstrap字体很棒，不能正常使用标签

Question

我有一个引导程序表单，其中我使用了带有标签的文本框，但它无法正常工作。如果我删除了span标记内的字体真棒图标，它正常工作，这是我的html

            <form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
      <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

我想做这样的事情

https://jsbin.com/quxodidebi/edit?html,js,output

Answer 1

这段代码怎么样？ Bootstrap 3：

<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>

Bootstrap 4

<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
  </div>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>

代码段：

＆＃13;

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

<div class="form-group">
  <label for="formGroupExampleInput">Example label</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <i class="fa fa-user fa-fw"></i>
      </span>
    </div>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

链接到JS小提琴：https://jsfiddle.net/sefnanLm/