字体真棒图标未出现在文本框中

Question

我正在尝试在文本框中放入真棒字体图标，但我无法这样做。我试图减小文本框的宽度，但仍在下面显示一行。您能否指导我解决此问题。我附上下面的代码。预先感谢。

<div class="form-row">
    <div class="form-group col-md-6">
        <label for="primaryName">PRIMARY NAME</label>
        <input type="text" class="form-control" id="primaryName" name="primaryName" placeholder="Name" >
        <div class="input-group-prepend bg-white">
                <span class="input-group-text border-left-0 rounded-right bg-light" id="basic-addon1"><i class="fas fa-user"></i></span>
        </div>
    </div>
    <div class="form-group col-md-6">
        <label for="primaryPhone">PRIMARY PHONE NUMBER</label>
        <input type="tel" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Phone number">
    </div>
</div>

屏幕上的输出如下：

我希望输出是这样的：

Answer 1

好的，问题是：

1. 您的类名错误：fas fa-user应该是fa fa-user。
2. 您没有input-group <div>来封闭。

修复以上两个问题都可以解决。

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="primaryName">PRIMARY NAME</label>
    <div class="input-group">
      <input type="text" class="form-control" id="primaryName" name="primaryName" placeholder="Name" >
      <div class="input-group-prepend bg-white">
        <span class="input-group-text border-left-0 rounded-right bg-light" id="basic-addon1"><i class="fa fa-user"></i></span>
      </div>
    </div>
  </div>
  <div class="form-group col-md-6">
    <label for="primaryPhone">PRIMARY PHONE NUMBER</label>
    <input type="tel" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Phone number">
  </div>
</div>

Answer 2

此语法没有错。它正在使用最新的Font Awesome版本（> v5.0）。

字体真棒5 ，

Syntax - <i class="fas fa-user"></i>
Font Awesome 5 CDN - https://use.fontawesome.com/releases/v5.2.0/css/all.css

字体真棒4 ，

Syntax - <i class="fa fa-user"></i>
Font Awesome 4 CDN - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

如果您需要任何澄清，请告诉我。 谢谢。