bootstrap 5+ 的 alert 默认无图标，若显示图标则来自手动添加、第三方插件或自定义 css；推荐用伪元素 + font awesome 字符码插入图标，需匹配字体族名、字重并设置 padding-left 和绝对定位。
直接用伪元素 + font awesome 字符码替换，别碰 alert 自带的图标逻辑——bootstrap 5+ 的 alert 默认根本不带图标，所谓“默认图标”其实是你自己或第三方加的，或者你误以为它有。
确认当前 Alert 是否真有图标
Bootstrap 官方 Alert 组件（div.alert）在 v5.3+ 中完全不渲染任何图标。如果你看到图标，大概率来自以下之一：
- 你项目里手动加了
<i class="fa-solid fa-info-circle"></i>这类 HTML - 用了第三方插件（如 bootstrap-icons 或旧版 glyphicons）
- 自定义 CSS 通过
::before插入了图标（比如你之前写过类似.alert::before的规则）
先打开浏览器开发者工具，选中 Alert 元素，看 computed styles 里有没有 ::before 内容，或 DOM 里有没有 i 标签。没有的话，就不是“修改”，而是“添加”。
用伪元素插入 FontAwesome 图标（推荐）
这是最干净、无 JS 依赖、兼容性好且不干扰 Bootstrap 原逻辑的方式。前提是 Font Awesome 已正确加载（CSS 版本，非 SVG-JS 版）。
-
font-family必须匹配实际加载的 FA 版本："Font Awesome 6 Free"（v6），不是"FontAwesome"或"fontawesome" -
font-weight: 900是 solid 图标必需值；若用 regular 图标（如fa-regular fa-circle-info），得改font-weight: 400并换字体族名为"Font Awesome 6 Free"（v6 中 solid/reguar 共享同一字体族名，仅靠 weight 区分） - 必须给
.alert加padding-left: 2.5rem，否则文字会覆盖图标 - 图标定位用
position: absolute+top: 50%+transform: translateY(-50%)，确保垂直居中，不受行高影响
示例 CSS：
.alert {
position: relative;
padding-left: 2.5rem;
}
.alert::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f05a"; /* info-circle */
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: inherit;
}
.alert-success::before { content: "\f058"; } /* check-circle */
.alert-warning::before { content: "\f071"; } /* exclamation-triangle */
.alert-danger::before { content: "\f057"; } /* times-circle */
替换关闭按钮（.btn-close）里的 × 图标
Alert 右上角那个 × 不是文字，是 Bootstrap 用 background-image 渲染的 SVG，且带 !important。想换成 FA 图标，不能只改 background，得用伪元素重绘。
- 删掉原
background-image，避免冲突；加.btn-close::before插入 FA 字符 - 必须设
font-family: "Font Awesome 6 Free"和font-weight: 900 - 加
line-height: 1和vertical-align: middle，否则 × 字符会上下偏移 - 记得同步处理
:hover和:disabled状态，否则交互时图标颜色/尺寸可能突变
示例：
.btn-close {
background-image: none;
font-size: 1.25em;
width: 1.5em;
height: 1.5em;
}
.btn-close::before {
content: "\f00d";
font-family: "Font Awesome 6 Free";
font-weight: 900;
line-height: 1;
vertical-align: middle;
}
最常被忽略的是：FA 字体路径或版本不匹配导致图标显示为方块，以及忘记给 .alert 加 padding-left —— 这两个问题占图标错位/不显示案例的 80% 以上。
