必须清空原生border三角并重写::after伪元素，因原生箭头是css border绘制的非背景图元素；直接加background-image无效且易错位，正确做法是display:none后用font awesome或svg重定义，同步确保padding-right足够、保留aria-expanded语义。
直接改 .dropdown-toggle::after 伪元素就行，但必须清空原 border 三角、补足 padding、保留 aria-expanded 语义——否则箭头会消失、点击失灵或读屏器无法识别。
为什么原生箭头不能用 background-image 替换
Bootstrap 的下拉箭头是纯 CSS ::after 伪元素 + border 绘制的三角，不是背景图，也不是真实 DOM 节点。你给 .dropdown-toggle 加 background-image 不会影响它，只会盖住文字或错位。
- 原生实现靠的是：
.dropdown-toggle::after { content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; } - 想换图标，唯一可靠路径是先
display: none这个伪元素，再用字体或 SVG 重写::after - 别碰
::before——那是.dropdown-menu自己的定位箭头，和触发按钮无关
用 Font Awesome 替换箭头的实操要点
这是最轻量、兼容性最好的方式，前提是项目已引入 Font Awesome。
- 先重置原样式：
.dropdown-toggle::after { display: none; } - 插入新图标：
.dropdown-toggle::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: 0.25rem; } - 必须同步调整
.dropdown-toggle的padding-right：原生值是2.25rem，替换后至少保持这个宽度，否则移动端热区被压缩，点不展开 - 颜色用
color控制，别依赖fill（字体图标不认 fill）
用 inline SVG 替换时容易踩的坑
SVG 更可控、无字体依赖，但细节更敏感。
- 推荐 base64 编码内联：
background-image: url("data:image/svg+xml,%3csvg...%3e"); -
background-position必须配准：right 0.75rem center是常用值，但需结合font-size和line-height微调 -
background-size建议设为0.5em或1rem，避免在缩放或高 DPI 屏幕上糊掉 - 千万别漏掉
background-repeat: no-repeat，否则图标重复平铺 - 如果用了
form-select，这套方法完全不适用——那是浏览器原生控件，得走appearance: none+background-image路线
移动端点不开？大概率是 padding-right 没对齐
这是最常被忽略的环节。开发者换了图标就以为完事，但没检查实际渲染后的点击热区宽度。
- 打开 DevTools，选中
.dropdown-toggle，看 computed 样式里的padding-right - 如果低于
2rem，尤其在 iOS Safari 上，手指一划就滑过，根本触不到触发区域 - 安全做法：显式写死
.dropdown-toggle { padding-right: 2.25rem !important; }，比依赖继承更稳 - 如果同时用了
btn-lg或btn-sm，记得对应放大或缩小padding-right值
真正麻烦的不是换图标，而是换完之后还要确保它在各种尺寸、各种设备、各种屏幕阅读器里都“可发现、可点击、可理解”。aria-expanded 由 Bootstrap JS 自动维护，你只管图标，别动它；热区宽度必须肉眼可见地留够，别靠估算。
