Bootstrap 5警告框添加SVG图标必须使用d-flex和align-items-center实现垂直居中，同时SVG需加flex-shrink-0防压缩，并提前注入SVG sprites、添加role="img"和aria-label以确保可访问性与兼容性。
Bootstrap 5 警告框加 SVG 图标必须用 d-flex + align-items-center
bootstrap 5 默认不渲染任何图标，.alert 元素本身不含图标 dom 节点 —— 所以你看到“没图标”，不是漏了配置，是根本没加。官方推荐方案是内联 bootstrap icons 的 svg，但必须配合弹性布局才能对齐。
-
d-flex和align-items-center缺一不可，否则图标和文字上下错位，尤其在多行文本时只对齐第一行 -
flex-shrink-0必须加在 SVG 上，否则窄屏下图标会被压缩变形 - 需提前在页面中注入 SVG sprites（如通过
<svg><defs><symbol id="exclamation-triangle-fill">...</symbol></defs></svg>），否则<use xlink:href="#exclamation-triangle-fill"></use>会失效 - 记得加
role="img"和aria-label，否则屏幕阅读器无法识别语义
用 Font Awesome 或 <i></i> 加图标时，line-height 和 padding 得重调
直接塞 <i class="fa-solid fa-triangle-exclamation"></i> 进 .alert 容易导致文字偏移、换行后图标悬空、或图标被截断 —— 根本原因是 Bootstrap 的 padding 和默认 line-height 是按纯文本设计的。
- 别依赖
<i></i>自带的行高，改用包裹容器（比如<span class="d-inline-flex align-items-center"></span>）控制基线 - 加
me-2（即margin-right: 0.5rem）保证图标和文字有合理间距 - 如果放大图标（如
font-size: 1.25rem），必须同步提升line-height或用align-items-center对齐，否则第二行文字会上浮
::before 替换图标必须先清 background-image 和调整 padding-left
Bootstrap 4/5 早期版本的警告框图标是靠 CSS background-image 实现的，不是真实 DOM 元素。所以你写 .alert-warning::before { content: "⚠"; } 却看不到效果，大概率是因为原背景还盖着，或者 ::before 没定位到正确位置。
- 必须先覆盖原样式：
.alert-warning { background-image: none !important; padding-left: 2rem !important; } -
.alert-warning上得加position: relative，否则::before的absolute会相对 body 定位 -
left: 0.75rem和top: 50%+transform: translateY(-50%)是垂直居中的最小可靠组合 - 字体图标要确保
font-family已加载完成，否则显示为方块；字符图标（如"⚠"）更轻量，但要注意 Unicode 兼容性
多行内容下图标悬空？别碰 text-indent，用 display: flex 包裹整个内容区
当警告框里有 <p></p>、换行符或长文本自动折行时，图标只锚定第一行，其余行左边缘“缩进丢失”，看起来像悬空 —— 这不是 margin 或 padding 问题，是块级内容未形成统一基线。
- 把文字内容（包括
<p></p>、<strong></strong>等）包进一个<div class="d-flex flex-column"> 或 <code><div class="d-inline-flex flex-column"> <li>避免对 <code>.alert直接设text-indent，它只影响首行，且会破坏语义对齐逻辑 - 如果用了自定义图标容器（如
<span class="alert-icon"></span>），给它设align-self: flex-start防止被拉伸
实际最稳的路径是：内联 SVG +
d-flex align-items-center + 提前注入 sprites。其他方式要么要 hack CSS，要么依赖额外字体加载，容易在 SSR 或低网速下出问题。
