bootstrap 5+ 的 .alert 组件默认不内置任何图标，所谓“带图标”实为开发者手动添加；官方 css 仅提供 .alert-dismissible 和 .btn-close 样式，图标来源包括 bootstrap icons、font awesome 或手写 svg。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

Alert 默认图标在哪定义的 Bootstrap 5+ 的 .alert 组件默认不内置 SVG 或 × 图标，所谓“带图标”的 Alert 实际是开发者自行添加的 —— 官方 CSS 只提供 .alert-dismissible 和 .btn-close（关闭按钮）的样式，而图标（如感叹号、叉号、信息圆圈）通常来自 Font Awesome、Bootstrap Icons 或手写 SVG。 如果你看到带图标 Alert，大概率是项目里引入了 bootstrap-icons 并配合 HTML 结构手动插入的，比如：

<div class="alert alert-warning">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"></use></svg>
  检查失败，请重试。
</div>

用 Bootstrap Icons 替换默认关闭按钮图标 .btn-close 是 Alert 右上角 × 按钮的默认元素，它本身用伪元素 ::before 渲染一个 Unicode ×（\e09a），但可通过覆盖 CSS 改为 SVG：

• 确保已引入 bootstrap-icons（CDN 或 npm）
• 重置 .btn-close 的伪元素，并用 <use></use> 指向新图标，例如 #x-lg
• 注意设置 width/height 和 fill，否则可能不可见

示例 CSS：

.alert .btn-close {
  background: none;
  border: 0;
  opacity: 1;
}
.alert .btn-close::before {
  content: "";
}
.alert .btn-close::after {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854z'/%3E%3C/svg%3E");
  background-size: contain;
}

给 Alert 主体加自定义图标（非关闭按钮） 最稳妥方式是直接在 <div class="alert"> 内首部插入 SVG 或 <code><i></i> 标签，并用 CSS 控制间距与对齐：

• 推荐用 bootstrap-icons 的 <svg></svg> + <use></use>，避免字体加载失败白屏
• 给图标加 flex-shrink-0 和 me-2（Bootstrap 5.3+）保证不换行、有右距
• 若用 <i class="bi bi-exclamation-triangle-fill"></i>，需确保 font-family: bootstrap-icons 已生效（CDN 引入后自动注册）
• 图标颜色建议用 currentColor，使其继承 .alert 的文本色

示例：

<div class="alert alert-danger d-flex align-items-center">
  <svg class="bi flex-shrink-0 me-2" width="20" height="20" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"></use></svg><div>数据库连接超时</div>
</div>

为什么直接改 .alert-warning::before 不生效 因为 Bootstrap 官方 Alert 类（.alert-warning、.alert-info 等）**没有定义任何伪元素图标**，它们只负责背景色、边框、文字色。试图覆盖 ::before 是徒劳的 —— 那个伪元素根本不存在。 真正要改的是你项目中实际渲染图标的那部分：

• 是你写的 <svg></svg> 标签 → 改它的 <use href></use> 或 width
• 是你引入的第三方图标库类名（如 .bi-info-circle）→ 改对应 class 或 CSS 变量
• 是自己写的 Sass 变量（比如 $alert-icon-width）→ 需在导入 Bootstrap 前覆写

最容易被忽略的一点：图标语义化。别只换图形，记得同步更新 aria-label 或 role="img" 的描述，否则屏幕阅读器仍会读“Warning”而图标已是问号。