如何用CSS修改Bootstrap关闭图标X的样式？-css教程-PHP中文网

bootstrap的.close按钮本质是渲染×字符的button，非svg或伪元素；应直接调整font-size、color、line-height等文本属性，禁用text-shadow并重置hover opacity，若用图标字体则需清空原字符后通过::before注入。

如何用css修改bootstrap关闭图标x的样式？

关闭图标X实际是`×`字符，不是独立元素

Bootstrap 的 .close 按钮（如模态框右上角的 X）本质是一个带 × 字符的 <button></button>，没有 SVG 或伪元素。它默认用 font-family: "Times New Roman", Times, serif 渲染 ×，所以改样式核心是控制字体、大小、颜色和间距。

常见错误是试图用 ::before 覆盖或给 × 加背景——它只是文本，不是可替换内容。

直接修改 .close 的 font-size、color、line-height 最有效
避免设置 width/height 后不配 padding，容易导致点击热区变小
若用自定义字体（如 Font Awesome），需确保字体加载完成且 font-family 优先级正确

覆盖默认字体和尺寸的最小安全写法

Bootstrap 5 默认 .close 的 font-size 是 1.5rem，line-height 是 1，且有 opacity: .5 悬停效果。要稳定替换 × 的视觉表现，建议在自定义 CSS 中这样写：

.close {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.75rem;
  line-height: 1;
  color: #dc2626;
  text-shadow: none;
}
.close:hover {
  color: #b91c1c;
  opacity: 1;
}

注意：text-shadow: none 很关键——某些 Bootstrap 版本会给 × 加阴影，导致粗细不均；opacity: 1 在 hover 时重置，否则可能看不清变化。

VPS Bootstrap

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

下载

用伪元素完全替换 × 字符（需禁用原生内容）

如果必须用图标字体或 SVG，不能依赖 × 字符本身。此时要清空内容再注入：

.close {
  position: relative;
  font-size: 0; /* 压缩原字符 */
  line-height: 0;
  padding: 0.25rem;
}
.close::before {
  content: "\f00d"; /* Font Awesome times icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.5rem;
  color: #dc2626;
}

风险点：