必须同时重置 background-image、background-repeat、background-position 和 background-size 四个属性，且收起/展开状态需分别定义 .accordion-button::after 和 .accordion-button.collapsed::after 规则，确保图标对齐、不拉伸、状态切换正常。
直接覆盖 .accordion-button::after 的 background-image 就能换图标，但只改这一项大概率失效——图标会偏位、拉伸、或收起展开状态不切换。
必须同时重置的三个 CSS 属性
Bootstrap 5 用 ::after 伪元素 + base64 SVG 渲染箭头，它默认设了三样东西：background-image、background-repeat、background-position。漏掉任意一个，图标就会出问题：
-
background-image：替换成你的 SVG data URL（推荐 inline，避免请求） -
background-repeat：必须设为no-repeat，否则可能平铺成一排小箭头 -
background-position：建议写成right 1rem center，和原生对齐；如果新图标宽高不同，还得同步调width/height
别漏掉 background-size: contain——否则 SVG 可能被裁剪或模糊。
收起/展开状态用 .collapsed 区分
Bootstrap 5 不靠 transform 旋转图标，而是靠 .accordion-button.collapsed 这个类来标记收起状态。所以你要写两套规则：
- 收起态图标（比如向右箭头）：
.accordion-button.collapsed::after - 展开态图标（比如向下箭头）：
.accordion-button::after（不带.collapsed）
两个规则里，除了 background-image 指向不同 SVG，其他属性（background-repeat、background-position、width、height、background-size）必须完全一致，否则视觉跳变。
用 Font Awesome 图标？得手动加 HTML
如果坚持用 <i class="fa-solid fa-chevron-down"></i>，就不能依赖 ::after 了，得改结构：
- 在每个
<button class="accordion-button"></button>里手动插入<i></i>标签 - 先隐藏原生伪元素：
.accordion-button::after { display: none; } - 再控制旋转：
.accordion-button:not(.collapsed) i { transform: rotate(180deg); }
注意：这种方案要改 HTML，且 transform 是作用在 i 上，不是按钮本身，别误写成 .accordion-button:not(.collapsed) { transform: ... }——那会把整个标题都转过去。
容易被忽略的尺寸和颜色继承
新图标如果用 SVG 内联编码，里面的 fill 颜色是硬编码的（比如 %23212529），不会随文字色变化。想让它响应主题色，有两个办法：
- SVG 里把
fill改成currentColor，然后靠.accordion-button的color控制 - 或者不用 inline SVG，改用 CSS 变量（如
--bs-accordion-btn-icon），但 Bootstrap 5.3+ 才原生支持，旧版得自己接管
另外，width 和 height 默认是 1.25rem，如果设得太小（如 1rem），图标会糊；太大（如 1.5rem）又可能撑开按钮高度——最好和 padding 协调着调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
