直接改--bs-accordion-btn-icon变量最可靠：bootstrap 5.3+将图标源抽为独立css变量，需设在.accordion-button作用域内，值为url编码的data uri svg，配合--bs-accordion-btn-icon-color等变量统一控制颜色与位置。
直接改 --bs-accordion-btn-icon 变量最可靠
Bootstrap 5.3+ 把图标源抽成了独立 CSS 变量，不是靠 ::after 硬写、也不是靠字体类切换。硬改伪元素容易被原生样式覆盖，尤其在嵌套或主题切换时失效。必须用变量统一控制，否则改了也白改。
关键点：--bs-accordion-btn-icon 必须设在 .accordion-button 或其祖先作用域内（比如 :root 或 .my-accordion），不能写在 .accordion-item 或全局 body 上。
-
--bs-accordion-btn-icon值必须是合法 data URI SVG，且内部颜色要 URL 编码（如%230d6efd，不是#0d6efd） - 推荐用
encodeURIComponent()处理原始 SVG 字符串，再检查结果是否含%开头的序列 - 如果只换图标不换色，保留
--bs-accordion-btn-icon-color原值即可；想单独调色就重设它
加号减号 SVG 怎么写才不崩
默认图标是下拉箭头，换成“+”“−”需手写 SVG 路径。常见错误是路径没闭合、viewBox 尺寸不匹配、或 fill 值未编码导致图标空白。
示例（加号）：url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%230d6efd' d='M8 4v8m4-4H8'/%3E%3C/svg%3E")
- 宽高建议固定为
16x16，和原生图标尺寸对齐，避免background-size计算错乱 - 路径里所有单引号、尖括号、井号都得 URL 编码，漏一个就会解析失败
- 别用
fill="currentColor"——深色模式下父级color是黑的，图标直接隐形；填具体色值或依赖--bs-accordion-btn-icon-color - 加完记得补
background-repeat: no-repeat; background-position: right 1rem center;，否则可能平铺或偏右太多
图标位置移到左边后点击失灵？查 padding-right 和 margin
原生图标靠 margin-left: auto 推到右侧，移到左边后若只清 margin-left 不补其他，文字会遮图标，且热区错位——手指点在图标上实际触发的是背景空白，事件目标不是按钮本身。
- 移左后必须清除原有右留白：
.accordion-button { padding-right: 1.25rem; }（原为2.5rem） - 给文字留出空间：
.accordion-button { padding-left: 2.5rem; }防遮挡 - 图标定位优先用
background-position: left 1rem center;，比margin-right: auto更稳，尤其在 flex 容器里 - 别依赖
margin-left: auto推图标——移动端 flex 主轴方向变化时容易错位
JS 切换图标类名？小心状态不同步
用 JS 监听 show.bs.collapse / hide.bs.collapse 改类名看似直观，但 Bootstrap 的过渡动画和快速连点会引发状态竞争：比如用户猛点两下，collapsed 类还没更新完，JS 已执行两次，图标就卡在“+”或“−”不动。
- 更稳的做法是读取当前状态：
heading.getAttribute('aria-expanded') === 'true'，再决定切哪个类 - 避免全局查询：
document.querySelectorAll('.accordion-button i')会批量操作所有面板，手风琴模式下 A 展开时 B 的图标也被误切 - 只操作当前触发元素：
e.target.closest('.accordion-button')，确保上下文隔离 - IE 不支持
classList.replace()，兼容场景改用remove()+add()
真正难的不是换图标，而是让 SVG 编码、热区尺寸、状态同步、深色模式四者同时成立——漏掉任意一环，用户点不中、图标看不见、或者白天正常晚上发灰，问题就藏在这些细节里。
