能，但需先清除默认 background 并设置 position: relative；再用 ::before 插入图标，或更稳妥地用 background-image 替换 SVG。
Bootstrap 4/5 警告框图标能用 ::before 换掉吗？不能直接换
Bootstrap 默认警告框（.alert）里的图标是通过 background-image 写死在 CSS 里的，不是独立 DOM 元素，所以你没法用 ::before 或 ::after “盖住”它再塞新图标——除非先清掉原背景。
常见错误现象：::before { content: "⚠"; } 写了但没显示，或者文字图标叠在原有 SVG 图标上，视觉混乱。
真正可行的做法是：先移除默认背景，再用伪元素注入新内容。关键点在于覆盖 Bootstrap 的 background 和控制 padding-left 避免文字被遮挡。
- Bootstrap 4/5 中警告框图标由
.alert > .alert-icon（v5.3+）或纯 background（v4/v5 早期）控制，多数项目仍用后者 - 必须重置
background、padding-left，否则新图标会和文字挤在一起 - 若用字体图标（如 Font Awesome），
font-family必须确保加载完成，否则显示为方块
用 ::before 插入自定义图标的具体写法
以 Bootstrap 5.2+ 默认警告框为例，目标是把黄色警告框（.alert-warning）的图标换成 ⚠ 字符：
立即学习“前端免费学习笔记（深入）”；
.alert-warning {
background-image: none !important;
padding-left: 2rem !important;
}
.alert-warning::before {
content: "⚠";
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.25rem;
line-height: 1;
}
注意几个硬性条件：
-
position: relative必须加在.alert-warning上，否则::before的absolute会相对 body 定位 -
!important是为了压过 Bootstrap 的默认background声明（它通常带!important） - 如果用 SVG data URL 替代字符，
content里要写成url("data:image/svg...")，但注意 IE 不支持
替换为 SVG 图标时的兼容性坑
用 content: url(...) 加载内联 SVG 看似简洁，但在 Safari 15.4–16.3 和部分旧版 Chrome 中，::before 里的 SVG 尺寸会失控，或根本不渲染。
更稳的方案是放弃 content，改用 background-image + background-size：
.alert-warning {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23856404' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 0.75rem center;
background-size: 1.25rem;
padding-left: 2.5rem;
}
这个写法绕过了 content 的渲染缺陷，且所有现代浏览器都认。
- SVG 必须 URL 编码，否则
%、等字符会导致解析失败 -
background-size推荐用rem，避免响应式下图标缩放失真 - 别忘了给
.alert-danger、.alert-success单独写规则，它们的图标颜色和路径都不同
为什么不要动 .alert-icon 这个类？
Bootstrap 5.3 引入了 .alert-icon 作为可选图标容器，但它默认不启用——只有你在 HTML 里显式写 <div class="alert-icon"></div> 才生效。大多数项目没这么用，强行依赖它反而增加维护成本。
更现实的选择是：只针对已有的 DOM 结构做样式覆盖。如果你正在升级 Bootstrap 版本，注意 5.3 的 .alert-icon 默认用了 display: flex，若你之前用伪元素定位，可能需同步调整 top/left 为 align-items + justify-content。
最易被忽略的一点：Bootstrap 的 .alert 在 display: flex 下，::before 会破坏主内容流布局，导致右侧关闭按钮错位——遇到这种情况，优先考虑用 background-image 方案，它不参与文档流。
