如何更改 Bootstrap 切换导航颜色？

Question

据我所见，这是切换导航按钮的代码：

 <button id="nav-toggle-button" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

我添加了 id=“nav-toggle-button” 并给了它这个 CSS：

 #nav-toggle-button {
color: gray;
}

但什么都没有改变。我也尝试添加 !important，但没有成功，我不知道还能尝试什么。有人知道吗？

编辑：这是 Prashant123 建议的解决方案的小提琴（抱歉，没有足够的声誉来投票支持你的答案！）：http: //jsfiddle.net/LuKSB/1/ 它已经好多了，但如果水平按钮内的线条将是可见的（白色）。我猜它会改变颜色，但它不起作用。

原文由 user3691280 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap 4 的变化

Bootstrap 4 中的 navbar-toggler-icon 使用 SVG background-image 。切换器图标图像有 2 个版本。一个用于浅色导航栏，一个用于深色（反向）导航栏……

 // this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-inverse .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

如果您想将此图像的颜色更改为其他颜色，您可以自定义图标。例如，这里我将 RGB 值设置为粉红色 (255,102,203)。注意 SVG 数据中的 stroke='rgba(255,102,203, 0.5)' 值。

 .custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

演示 http://codeply.com/go/4FdZGlPMNV

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议