Bootstrap 5 navbar-toggler-icon颜色修改无效问题求助

Bootstrap 5的navbar-toggler-icon并非文字或边框元素，而是通过背景SVG图片实现的，这就是你修改color、border-color等属性无效的核心原因。下面是几种可行的解决方法：

方法1：使用CSS滤镜快速转成纯白色 #

通过filter属性将图标转为纯白，注意要保证选择器优先级足够覆盖Bootstrap默认样式：

.navbar-toggler .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

如果上述代码不生效，可提升选择器优先级或添加!important（仅在必要时使用）：

.navbar-expand-lg .navbar-toggler .navbar-toggler-icon {
  filter: brightness(0) invert(1) !important;
}

方法2：自定义背景SVG图标 #

直接替换默认的背景图，使用自定义颜色的SVG：

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

你可以修改stroke='rgba(255, 255, 255, 1)'中的颜色值来调整图标颜色。

方法3：通过Sass变量全局修改（适用于Sass编译项目） #

如果你的项目使用Sass引入Bootstrap，可直接修改变量后重新编译：

$navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

重要提醒 #

确保你的自定义CSS文件在Bootstrap官方CSS文件之后引入，否则自定义样式会被默认样式覆盖。

内容的提问来源于stack exchange，提问作者Vinnei