直接改 .accordion-toggle::after 不生效，是因为 bootstrap 4 中箭头由 font awesome 字体控制，需匹配 font-family、font-weight，且常被 !important 覆盖或受字体加载顺序影响；常见问题包括字体未配对、content 被覆盖、或伪元素被隐藏。
为什么直接改 .accordion-toggle::after 不生效？
Bootstrap 4 的手风琴（Accordion）默认用 ::after 伪元素 + content: "\f192"（Font Awesome 4 的向下箭头 Unicode）渲染折叠箭头，但它被包裹在 .card-header 内部的 <a></a> 或 <button></button> 上，且 CSS 优先级受 !important 和字体加载顺序影响。常见现象是：你写了新样式，但箭头还是旧的、变方块、或完全消失。
关键原因有三个：font-family 没配对（比如用了 FA5+ 但没切到 font-family: "Font Awesome 5 Free"）、content 被 Bootstrap 的 !important 覆盖、或者伪元素被 display: none 或 visibility: hidden 干扰。
替换箭头图标的三种可靠方式（按推荐顺序）
不依赖 Font Awesome 版本锁定，也不动 HTML 结构，只靠 CSS：
- 用
background-image+padding-right替换伪元素：清空content，用 SVG Base64 或 CDN 图片作背景，控制尺寸和位置更稳 - 用
mask-image（现代浏览器）叠加自定义 SVG 图标：保留原有布局流，支持颜色继承，适配深色模式 - 覆盖
::after并显式重设font-family和content：仅当确定使用 FA5 Free Solid 时可用，需加!important抵消 Bootstrap 默认声明
示例（推荐第一种）：
.accordion-button::after {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: .8em;
padding-right: 2.2rem;
}
折叠/展开状态如何区分并切换图标？
Bootstrap 4 用 .collapsed 类标记未展开项，所以不能只靠 ::after，得结合类名控制不同状态下的 background-position 或 transform。注意：不要用 rotate(180deg) 简单翻转——它会把整个按钮内容一起转，破坏可访问性。
- 展开态（无
.collapsed）：保持默认向下箭头 SVG - 折叠态（有
.collapsed）：用background-position: right 1rem center+ 向上箭头 SVG，或用transform: scaleY(-1)单独翻转伪元素背景（需额外包裹层或用mask） - 务必给
transition: background-position 0.2s, transform 0.2s，否则切换生硬
小技巧：把两个方向的 SVG 合成一张雪碧图，用 background-position 切换，减少请求和重绘。
IE11 兼容性与字体图标 fallback 方案
IE11 不支持 mask-image 和大部分 SVG in background-image 的编码写法（特别是带 % 编码的），此时必须降级为字体方案。但要注意：font-family 必须精确匹配所用图标字体的声明名，FA4 是 "FontAwesome"，FA5 Free 是 "Font Awesome 5 Free"，且需指定 font-weight: 900（Solid）或 400（Regular）。
安全写法（兼容 IE11+）：
.accordion-button::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f192" !important;
}
.accordion-button.collapsed::after {
content: "\f191" !important; /* 向上箭头 */
}
真正容易被忽略的是：如果项目里同时引入了 FA4 和 FA5 的 CSS，浏览器可能加载错字体文件，导致显示为方块——检查 DevTools 的 Computed 面板里 font-family 实际解析结果，比猜更有用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
