最有效方法是直接修改 .navbar-toggler-icon 的 background-image 为自定义 base64 SVG，或改用 mask + background-color 组合确保跨浏览器兼容；需同步覆盖主题类、悬停状态及边框色。
直接改 .navbar-toggler-icon 的 background-image 最有效
Bootstrap 的汉堡图标不是文字，也不是普通 SVG 元素，而是通过 background-image 渲染的 base64 编码 SVG。所以写 .navbar-toggler { color: red; } 完全无效——它根本没读取 color 属性。
实操建议：
- 复制 Bootstrap 默认的 SVG data URL（可在浏览器开发者工具里右键检查
.navbar-toggler-icon查看 computed background-image） - 把其中
stroke='rgba(0,0,0,0.5)'里的0,0,0换成你要的 RGB 值，比如红色就改成220,53,69，再 URL 编码（,→%2C，(→%28等） - 用新 URL 覆盖
.navbar-toggler-icon的background-image，并确保你的 CSS 在 Bootstrap 之后加载
Bootstrap 5.3+ 推荐用 mask + background-color 组合
单纯靠重写 background-image 在 Safari 里可能不显示，因为部分版本对 base64 SVG 的 stroke 解析不稳定。更健壮的方式是禁用图片、改用 mask 遮罩 + 实色填充。
示例代码：
.navbar-toggler-icon {
background-image: none;
mask: 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,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-webkit-mask: 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,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
background-color: #dc3545;
width: 1.5em;
height: 1.5em;
}
注意点：
- 必须同时写
mask和-webkit-mask，否则 Safari 不渲染 -
background-color才是最终看到的颜色，stroke值在 mask 里只是占位，可统一设为黑或透明 - 别漏掉
width和height，否则图标可能缩成一条线
别忘了同步处理 :hover、:focus 和主题类配对
只改默认态，鼠标悬停时图标又变回灰色，是因为 Bootstrap 对 .navbar-light .navbar-toggler-icon 和 .navbar-dark .navbar-toggler-icon 分别定义了不同 base64 图标。如果你自定义了颜色，但父容器还带 .navbar-light，它仍会尝试加载原生浅色图标，覆盖你的样式。
安全做法：
- 去掉
.navbar-light或.navbar-dark类，自己控制所有颜色逻辑 - 或者显式覆盖两种主题下的图标：
.navbar-light .navbar-toggler-icon和.navbar-dark .navbar-toggler-icon都写一遍 - 给按钮加
:hover和:focus状态的边框/背景色，否则悬停时只有图标变色，按钮本身无反馈
深色背景上图标看不见？大概率是边框和图标同时失效
比如你用了 bg-dark，但 .navbar-toggler 默认边框是 rgba(255,255,255,.1)，几乎不可见；而图标如果还是默认灰，就会彻底“消失”。
必须一并处理：
-
.navbar-toggler的border-color（推荐设为rgba(255,255,255,.2)或更高对比度） -
.navbar-toggler-icon的实际颜色（按前两节方法改） - 如果用了
.navbar-dark，记得它还会设置.navbar-toggler的background-color: transparent，你可能需要额外加background-color: rgba(255,255,255,.05)来提供轻微底衬
最易被忽略的是：图标颜色改了，但没动边框色，结果在深背景上只剩一根细线——那根线就是边框，不是图标。
