Navbar-Toggler图标颜色无法通过color或fill修改，因其是SVG background-image且颜色硬编码在base64中；可靠方式为替换background-image：使用编码后的彩色data URL或本地SVG文件。
Navbar-Toggler图标颜色为什么改不了
直接在 .navbar-toggler-icon 上写 color 或 fill 没用——它本质是 svg background-image，靠 url("data:image/svg+xml...") 内联编码生成，所有颜色都硬编码在 base64 数据里。你改 css 属性，浏览器根本不会解析 svg 内容。
覆盖默认 background-image 的两种可靠方式
必须重置整个 background-image，用新 SVG 替换原生图标。推荐以下任一做法：
- 用
bootstrap-icons提供的 SVG 路径（更轻量），手动构造带颜色的 data URL：background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ff6b35' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); - 用本地 SVG 文件（适合多色/复杂定制）：
.navbar-toggler-icon { background-image: url("../assets/toggler-white.svg"); }注意路径要相对于 CSS 文件位置
使用 SCSS 变量批量控制（仅限 Bootstrap 5+ 自建编译）
如果你用 SCSS 源码构建项目，别碰 background-image，改变量更干净：
$navbar-toggler-icon-bg: url("data:image/svg+xml,#333"); // 十六进制需 URL 编码 但注意：这个变量只影响默认图标，自定义 SVG 仍需手动替换 background-image。
常见踩坑点
这些地方容易白忙活：
- 忘记对 SVG 中的
#、、<code>>等字符做 URL 编码（比如#000→%23000） - 在
.navbar-toggler上设color，指望子元素继承——.navbar-toggler-icon是伪背景，不继承 - 用
filter: invert(1)强行变色，结果在深色模式下翻车，且无法精确控色 - Bootstrap 4 和 5 的 SVG 结构不同（4 是三条线，5 默认也是三条线但 viewBox 更紧凑），混用代码会变形
真正可控的方式就两条：换 data URL，或换 SVG 文件。其他都是障眼法。
