Bootstrap 5 警告框添加 SVG 图标需内联 Bootstrap 自带 SVG 并配合 d-flex、align-items-center 实现垂直居中，注意引入 SVG sprites、避免 flex-shrink-0 压缩，并确保图标语义化（aria-label 或 role="img"）。
Bootstrap 5 警告框如何添加 SVG 图标
Bootstrap 5 默认不自带图标，alert 组件本身也不自动渲染图标 —— 所以你看到的“无图标”不是配置错了，是压根没加。
推荐直接内联 Bootstrap 自带的 SVG 图标（轻量、无额外请求），放在 <div class="alert"> 内最前面：
<div class="alert alert-warning d-flex align-items-center">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:">
<use xlink:href="#exclamation-triangle-fill"/>
</svg>
<div>警告：磁盘空间不足</div>
</div>
注意三点：
-
d-flex和align-items-center是必须的，否则图标和文字无法垂直居中对齐 -
flex-shrink-0防止 SVG 在窄屏下被压缩变形 - 需提前在页面中引入 Bootstrap 的 SVG sprites（通常通过
<svg><defs>...</defs></svg>注入，或使用官方 CDN 的bootstrap-icons）
自定义图标时 class 冲突导致布局错乱
用 Font Awesome 或自定义 <i> 标签加图标时，常见文字换行、上下偏移、行高不一致等问题。根本原因是 alert 默认的 padding 和 line-height 是按纯文本设计的。
稳妥做法是重置图标容器的排版行为：
<div class="alert alert-danger">
<span class="d-inline-flex align-items-center me-2">
<i class="fa-solid fa-triangle-exclamation text-danger"></i>
</span>
操作失败，请重试。
</div>
关键点：
- 不用
<i>直接撑开行高，改用<span class="d-inline-flex align-items-center">包裹图标 - 加
me-2（margin-end）提供右侧间距，避免图标紧贴文字 - 如果用了
font-size: 1.25rem等放大图标，记得同步调高line-height或用align-items-center对齐
Alert 内容多行时图标与文字不对齐
当警告内容换行（比如含 <br>、<p> 或长文本自动折行），图标容易只对齐第一行，下面几行左边缘“悬空”。
解决方式不是加 text-indent，而是让整个内容区形成一个弹性块：
<div class="alert alert-info">
<div class="d-flex">
<svg class="bi flex-shrink-0 me-2 mt-1" ...></svg>
<div>
<h5 class="mb-1">系统通知</h5>
<p class="mb-0">您的配置已保存，但部分设置需重启服务后生效。</p>
</div>
</div>
</div>
要点：
- 外层
d-flex把图标和文字内容作为两个 flex item 排列 -
mt-1是微调 SVG 垂直位置的常用手段（因<h5>上边距比普通文本大） - 内部文字用
<div>包裹而非直接放<p>，避免默认 margin 干扰 flex 布局
IE11 兼容下图标不显示或错位
IE11 不支持 flex-shrink-0 和部分 SVG use 语法，且 d-flex 类会失效。若仍需支持，得降级处理：
放弃 SVG sprite，改用 base64 编码的内联 PNG 或字体图标，并手动写 CSS：
.alert-icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
background: url("data:image/png;base64,iVBORw...") no-repeat center;
background-size: contain;
vertical-align: middle;
margin-right: 0.5rem;
}
然后在 HTML 中：
<div class="alert alert-warning"> <span class="alert-icon"></span>警告：证书将在7天后过期。 </div>
这种写法虽冗余，但能避开 IE11 对 flex + SVG 的双重兼容问题。现代项目可忽略此节 —— 除非你真在维护一个还在跑 IE11 的后台系统。
真正容易被忽略的是：图标语义化。别只加视觉符号，务必配 aria-label 或 role="img"，否则屏幕阅读器用户完全不知道这是警告还是提示。
