Navbar-toggler-icon 颜色/形状无法通过 color、font-size 等常规 CSS 属性修改，因其本质是硬编码在 background-image 中的 base64 SVG；唯一可靠方式是替换 background-image，推荐使用含 currentColor 的 data URL 实现主题色自动适配。
navbar 的收缩图标（即 .navbar-toggler-icon）不是普通 html 内容，不能靠改文字或加 class 控制；它本质是 css 背景图，硬编码在 background-image 里。直接写 color 或 fill 完全无效。
为什么 navbar-toggler-icon 颜色/形状改不了
Bootstrap 5 把三横线图标写死为 base64 编码的 SVG data URL，例如：
background-image: url("data:image/svg+xml,%3Csvg...%3E");里面的颜色、线条粗细、间距全在 SVG 字符串里硬编码。你加 color: red 到 .navbar-toggler 或 .navbar-toggler-icon 上，浏览器根本不会解析 SVG 内容，自然没反应。
- 不是字体图标，
font-size和text-*类无效 - 不是
<svg></svg>元素，无法用 CSS 选中<path></path>改fill - 不是图片链接，
img相关属性（如width）也不起作用
替换 background-image 是唯一可靠方式
必须覆盖整个 background-image 声明，用新 SVG 替换原生图标。两种主流做法：
- 用内联 data URL（推荐）：无额外请求、路径无关、易配色。例如红色三横线：
.navbar-toggler-icon {<br> background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23e74c3c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");<br>}- 用本地 SVG 文件（适合复杂定制）：
.navbar-toggler-icon {<br> background-image: url("../assets/icons/menu-white.svg");<br> background-repeat: no-repeat;<br> background-position: 50%;<br>}注意：url() 中的路径是相对于当前 CSS 文件位置，不是 HTML 页面。
用 currentColor 实现主题色自动适配
如果希望图标颜色随父元素 color 变化（比如深色模式下自动变白），SVG 中用 fill="currentColor" 或 stroke="currentColor"，然后给 .navbar-toggler 设 color：
.navbar-toggler { color: #333; }<br>.navbar-toggler-icon {<br> background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");<br>}这样只需改一次 color，图标和文字就同步变色，不用维护多套 data URL。
常见坑：图标不显示或点击失效
图标不出现，90% 是因为 .navbar-toggler-icon 没拿到 CSS 变量或背景图被覆盖失败：
-
.navbar-toggler-icon必须嵌套在带.navbar类的祖先元素内，否则--bs-navbar-toggler-icon-bg变量未定义（即使你手动写了background-image，也得确保父级结构合法） - 自定义 CSS 必须放在 Bootstrap CSS 之后，否则被覆盖
- 如果用了
data-bs-breakpoint，确保对应断点类（如.navbar-expand-md）存在且生效，否则 JS 不触发折叠逻辑——图标可能“有但点不动” - 检查浏览器控制台是否报
Failed to load resource，说明 data URL 编码错误或 SVG 路径非法
真正要改图标，绕不开重写 background-image；想省事又可控，就用 currentColor + color 组合，比反复编码 data URL 更可持续。
