Bootstrap 5+ 的 .alert 无默认图标，所有图标需手动添加；直接用 ::before 插入 SVG 需重置 background-image、设置 position 和 padding，并确保 SVG URL 编码及 fill 颜色正确；推荐 inline SVG 方案，需加 d-flex 包裹、flex-shrink-0 me-2 类、固定尺寸与 viewBox、fill="currentColor" 及 aria-label；替换 .btn-close 图标时须清除 filter。
Bootstrap 5+ 的 .alert 根本没有“默认图标”——你看到的图标全是手动加的。所谓“修改默认图标”，其实是覆盖你项目里已有的图标逻辑，或从零添加自定义 SVG。直接改 CSS 类名或指望 alert-icon 类生效，基本都会失败。
为什么直接写 .alert::before { content: url(...) } 不显示？
因为 Bootstrap 官方 CSS 里没给 .alert 设任何 background-image 或伪元素图标；如果你写了但没效果，大概率是：你没加 position: relative，伪元素定位失效；或者你忘了清掉自己之前写的 background-image，新内容被盖住了；又或者 padding 没调，图标和文字挤成一团。
- 必须先重置：
.alert { background-image: none; padding-left: 2.5rem; position: relative; } -
::before要设position: absolute+top: 50%+transform: translateY(-50%)才能垂直居中 - 用
url("data:image/svg+xml,...")时，SVG 必须 URL 编码，且fill颜色要用%23替换#（比如%23dc3545）
用 inline SVG 插入（最可控，推荐）
把 SVG 写进 HTML，不依赖字体加载、不被 CSS 滤镜干扰、颜色可继承、支持 hover 动画。但必须加对 class 和属性，否则在多行文本里会错位。
- 必须加
class="flex-shrink-0 me-2"：防止窄屏压缩，提供右侧间距 - 必须套
<div class="d-flex align-items-center">包裹整个 alert 内容，否则第二行文字会上浮 -
<svg>要设width="1.25rem" height="1.25rem" viewBox="0 0 16 16"，fill="currentColor"让颜色随.alert-danger等自动变 - 别漏
role="img" aria-label="Warning"，否则屏幕阅读器读不出语义
替换关闭按钮 .btn-close 的 SVG 图标
Bootstrap 5.3+ 的关闭按钮默认用 background-image: url(data:image/svg+xml,...) 渲染，且带 filter: invert(1) opacity(.5) —— 这个滤镜会让你的自定义 SVG 变灰甚至空白。
- 必须显式写
.btn-close { filter: none; }，否则新图标不可见 - 新 SVG 最好保持 16×16 尺寸，
background-size: 1em才能等比缩放 - 如果用深色主题，建议把 fill 改成
%236c757d（Bootstrap 中性灰），别硬写%23000 - 不要只改
color或font-size：它不是文字，改了无效
最容易被忽略的是：inline SVG 的 viewBox 和 fill="currentColor" 必须同时存在，缺一不可；而 .btn-close 的 filter 重置常被跳过，导致换了 SVG 却看不到效果。
