Bootstrap 5图标无法显示问题排查求助

问题根源 #

你代码里用的是Font Awesome图标类（比如fa fa-user、fa-brands fa-windows），但页面只引入了Bootstrap 5的CSS和JS，没加载Font Awesome的样式文件；如果想用Bootstrap官方自带的图标，需要用对应的bi前缀类，且引入Bootstrap图标CSS。

两种可选解决方案 #

方案1：改用Bootstrap 5官方图标 #

1. 在<head>中添加Bootstrap图标样式：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

2. 替换图标类为Bootstrap对应图标类，用Bootstrap字体大小类替代Font Awesome的fa-3x：

<!-- 原fa fa-user替换为bi-person，fa-3x替换为fs-1 -->
<i class="bi bi-person fs-1"></i>
<!-- 原fa-brands fa-windows替换为bi-windows -->
<i class="bi bi-windows fs-1"></i>

方案2：保留Font Awesome类，引入对应资源 #

如果想继续使用当前的Font Awesome类，只需在<head>中添加Font Awesome的CSS：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

代码额外修复 #

你的代码还有两处错误需修正：

1. 第二个<h2>标签的class属性未闭合，正确写法：

<h2 class="display-6">100</h2>

2. 布局结构错误，col-lg-3必须放在row标签内部，否则无法正常排版：

<div class="row text-center pt-4">
  <div class="col-lg-3">
    <!-- 第一个图标模块内容 -->
  </div>
  <div class="col-lg-3">
    <!-- 第二个图标模块内容 -->
  </div>
</div>

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