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>