答案是直接修改 .dropdown-toggle::after 伪元素：先设 display: none 清空原 border 三角，再用 Font Awesome 或 SVG 重写图标，并同步调整 padding-right: 2.25rem !important 以保障点击热区和无障碍支持。
直接改 .dropdown-toggle::after 但必须清空原 border 三角
Bootstrap 4 的箭头是纯 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;
}
想换图标，第一步就是把它干掉：
.dropdown-toggle::after { display: none; }- 别碰
::before——那是.dropdown-menu自己的定位箭头，和触发按钮无关 - 确保后续重写的
::after有足够content和font-family支持
用 Font Awesome 替换时，padding-right 必须同步调大
原生 .dropdown-toggle 的 padding-right 是 2.25rem，这是为三角预留的热区宽度。你删了三角却没补足空间，移动端点击就会失灵——手指点在“空”上，菜单根本不展开。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 先重置：
.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 !important; }（加!important是为了压过 Bootstrap 的默认值） - 保留
aria-expanded属性——读屏器靠它识别状态，删了会破坏无障碍支持
用 SVG 替换更可控，但要注意尺寸和垂直对齐
如果项目没引入 Font Awesome，SVG 是更轻量、无字体依赖的选择。但 SVG 图标默认是行内块级元素，容易和文字基线错位。
关键控制点：
- 把 SVG 写进
content不现实，得用background-image配合padding-right+background-position - 推荐做法：用
data-*属性存 SVG 字符串，再用 JS 注入style，但纯 CSS 场景下更稳妥的是用mask或clip-path做 icon 容器 - 最简方案：
.dropdown-toggle { background: url("data:image/svg+xml,%3Csvg...%3E") no-repeat right 0.75rem center / 1em 1em; padding-right: 2.25rem; } - 注意 URL 编码里的
%3C和%3E，漏一个就整个图标不渲染
移动端点击失效？大概率是 padding-right 没设够或伪元素被裁剪
很多开发者改完图标发现手机点不动，翻来覆去查 JS 逻辑，其实问题出在 CSS 层——.dropdown-toggle 的可点击热区被压缩了。
检查这三点：
- 是否忘了加
!important覆盖 Bootstrap 默认的padding-right？ - 是否用了
transform: scale()或line-height导致伪元素实际渲染位置偏移？ - 是否在父容器上写了
overflow: hidden，把右侧的伪元素（或 SVG 背景）直接裁掉了？
真正难调试的不是怎么画新箭头，而是让新箭头在所有设备上都“可点、可读、不飘移”。padding-right、aria-expanded、overflow 这三个地方，漏掉任何一个，用户就卡在第一关。
