html - Font Awesome 图标没有出现在文本框内

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>