bootstrap 4警告框关闭按钮由.close::before伪元素渲染unicode×符号，需用content替换并加!important；必须限定选择器如.alert .close::before，保留transform: translate(-50%, -50%)居中。
关闭按钮图标实际由伪元素 ::before 渲染
Bootstrap 4 的 .close 按钮本身不包含真实 HTML 元素，而是用 ::before 伪元素 + Unicode 字符（\00d7，即 ×）实现。直接替换 <span></span> 内容无效，必须覆盖伪元素的 content 和样式。
覆盖 .close::before 的 content 值即可换图标
只需重写该伪元素的 content，并可选调整大小、颜色和垂直对齐。注意必须加 !important（因 Bootstrap 默认规则权重高），且保留 display: block 和 position: absolute 等布局属性，否则按钮错位。
.alert .close::before {
content: "\2715"; /* ✕ Unicode，比 \00d7 更粗 */
font-size: 1.5rem;
color: #dc3545;
line-height: 1;
}
-
\2715、\2716（✕、✚）、\2718（✘）等都是常用替代符号，查 Unicode 表确认编码 - 若用自定义字体图标（如 Font Awesome），需确保字体已加载，并设
font-family: "Font Awesome 5 Free";和对应content（如"\f00d"） - 不要删掉
transform: translate(-50%, -50%)—— 这是居中关键，删了图标会偏移
作用域控制：避免全局污染其他 .close 按钮
Bootstrap 中 .close 也用于模态框、折叠组件等。只改警告框的关闭按钮，必须限定父级选择器，例如：.alert .close::before 或更精确的 .alert-warning .close::before。
- 错误写法：
.close::before→ 会影响所有关闭按钮 - 推荐写法：
.alert-dismissible .close::before→ 匹配所有可关闭警告框（含.alert-success等） - 如果只想改某一种类型（如仅错误提示），用
.alert-danger .close::before
SVG 图标替换需额外处理尺寸与定位
若坚持用内联 SVG 替代 Unicode，不能靠 content 插入（CSS content 不支持 SVG 标签），得改 HTML 结构或用背景图。更稳妥的做法是：保留 .close 结构，用 background-image 覆盖：
.alert .close {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dc3545' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center;
background-size: 1rem;
text-indent: -9999px; /* 隐藏原 × 符号 */
overflow: hidden;
}
- 必须设
text-indent: -9999px隐藏原始伪元素内容，否则文字与 SVG 叠加 - 内联 SVG 要 URL 编码，建议用在线工具生成；未编码会导致解析失败，图标不显示
- 背景图方式兼容性更好，但无法动态变色（除非用 CSS 变量配合
filter: invert()等间接手段）
真正要改的只是那一行 content，但容易栽在选择器范围、伪元素继承样式、以及忘记 !important 上。Unicode 替换最轻量，SVG 方案看着高级，实际调试成本高得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
