navbar-toggler-icon 默认是三横线且不能直接改颜色，因其为硬编码的svg data url，内部fill值为#000且不继承父级color；可靠替换方式有三：伪元素覆盖、html内嵌图标或引入图标库，并需注意尺寸、对齐及暗色模式适配。
为什么 navbar-toggler-icon 默认是三横线，且不能直接改颜色？
因为 Bootstrap 5 的 navbar-toggler-icon 是用 SVG data URL 实现的，硬编码在 CSS 里，不是字体图标或独立元素。你用 color 或 fill 直接设在按钮上无效——它不继承父级颜色，SVG 内部 fill 是写死的 #000。
替换图标的三种可靠方式（按推荐顺序）
别碰 Bootstrap 源码或 JS 动态注入 SVG，容易随版本失效。优先用 CSS 覆盖或自定义内容：
- 最稳：用
::before伪元素覆盖，默认图标，通过background-image换成你自己的 SVG data URL（确保 base64 编码，避免路径问题） - 最简：删掉
navbar-toggler-icon，直接在button里放 HTML，比如<span>☰</span>（☰）或自定义 SVG 标签 - 最灵活：用 Font Awesome 等图标库，但需确保图标在折叠态下仍可点击（加
pointer-events: all，否则 SVG 容器可能拦截事件）
用 CSS 替换时必须处理的两个细节
光换图标不够，常见翻车点：
-
navbar-toggler-icon默认宽高是1.5em，你的新 SVG 如果比例不对，会拉伸或留白，建议统一设width: 1.5em; height: 1.5em; background-size: contain; - 默认图标有上下 padding，换完后如果看起来“太靠上”，是因为伪元素默认
vertical-align: baseline，加vertical-align: middle;对齐 - 暗色主题下记得同步覆盖
@media (prefers-color-scheme: dark)里的 fill 值，否则图标变黑底黑图
一个能直接粘贴的最小可行示例
把下面这段塞进你的 CSS（不用改 HTML 结构）：
.navbar-toggler-icon {
background-image: none;
}
.navbar-toggler-icon::before {
content: "";
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%280,0,0,0.8%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
这个 SVG 是加粗三横线，透明度可控，适配浅色/深色背景。想换成叉号、菜单文字或品牌图标，只换 background-image 里的 data URL 就行。
真正麻烦的从来不是换图标，而是换完后在移动端 Safari 上发现点击热区变小——检查下 navbar-toggler 的 padding 和 min-width 是否被你重置掉了。
