bootstrap-4 - Bootstrap4 输入组插件问题

Question

从屏幕截图可以看出，我在 input-group-addon 中附加的 fa 图标不起作用。有什么建议可以解决吗？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<form>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-addon"><i class="fa fa-user"></i></span>
      <input type="text" class="form-control" placeholder="Name">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
      <input type="email" class="form-control" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
      <textarea class="form-control" placeholder="Message" rows="5"></textarea>
    </div>
  </div>
  <input type="submit" value="Submit" class="btn btn-primary btn-block btn-lg">
</form>

Answer 1

类在最新的 4.0.0 中发生了变化...

https://www.codeply.com/go/EnCJUbqs0g

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<form>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <div class="input-group-prepend"><i class="input-group-text fa fa-user"></i></div>
      <input type="text" class="form-control" placeholder="Name">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-prepend"><i class="input-group-text fa fa-envelope"></i></span>
      <input type="email" class="form-control" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-lg">
      <span class="input-group-prepend"><i class="input-group-text fa fa-pencil"></i></span>
      <textarea class="form-control" placeholder="Message" rows="5"></textarea>
    </div>
  </div>
  <input type="submit" value="Submit" class="btn btn-primary btn-block btn-lg">
</form>