如何更改Bootstrap 5中汉堡导航图标的颜色？

在Bootstrap 5中，汉堡图标是通过.navbar-toggler-icon类的背景SVG实现的，以下是两种常用的修改颜色方法：

方法一：自定义CSS直接覆盖 #

直接修改.navbar-toggler-icon的背景SVG颜色，或用滤镜调整：

方式1：替换SVG描边颜色 #

将SVG中的stroke属性值改为目标颜色（支持十六进制、RGB/RGBA），示例代码：

.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");
}

其中rgba(255, 255, 255, 1)代表白色，可替换为任意颜色值（如#ff0000表示红色）。

方式2：使用滤镜反转颜色 #

若原图标为深色，想快速转为浅色，可使用filter属性：

.navbar-toggler-icon {
  filter: invert(1); /* 值范围0-1，1为完全反转，0.5为半透明反转 */
}

方法二：通过Sass变量自定义（适用于编译Bootstrap的项目） #

如果用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");

小提示 #

你提供的原代码中，折叠容器的id="#navbarSupportedContent"多了一个#，需改为id="navbarSupportedContent"，否则导航栏折叠功能可能失效。

内容的提问来源于stack exchange，提问作者Midhun krishna P