input group内图标不显示问题及带前置图标输入组实现方案

现有代码的问题 #

你给出的input group代码结构完全符合Bootstrap的官方规范，图标不显示的核心原因是未引入Font Awesome图标库依赖：代码中fas fa-th-list是Font Awesome提供的图标类名，没有加载对应CSS资源的情况下，浏览器无法识别渲染对应的图标。

排查修复步骤 #

• 先确认两个必要依赖已经正确引入：
  1. Bootstrap CSS文件：input-group、form-control、input-group-text均为Bootstrap内置样式类，未引入会出现布局错乱
  2. Font Awesome CSS文件：负责渲染所有fas/far等前缀的图标样式
• 若已经引入依赖仍不显示，可按以下顺序排查：
  1. 检查类名拼写：确认fas fa-th-list没有字母拼写错误、大小写错误
  2. 排查样式冲突：检查是否有自定义CSS将<i>标签的display设为none、font-size设为0，或是覆盖了Font Awesome的字体配置
  3. 匹配版本规则：如果你使用的是4.x及更早版本的Font Awesome，图标类前缀为fa而非fas，需要将类名修改为fa fa-th-list

占位符前置图标实现（无需input group） #

如果不需要Bootstrap的input group外显样式，只想在输入框内容/占位符左侧显示图标，可以通过CSS定位实现，示例代码如下：

<style>
/* 自定义输入框图标样式 */
.icon-input-wrap {
  position: relative;
}
.icon-input-wrap i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
}
.icon-input-wrap input {
  padding-left: 36px;
}
</style>

<div class="icon-input-wrap">
  <i class="fas fa-th-list"></i>
  <input type="text" class="form-control" id="location" placeholder="Location">
</div>

内容的提问来源于stack exchange，提问作者Enchantres