如何更改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;
}

但一切都没有改变.我尝试添加!重要,但没有成功,我不知道还有什么可以尝试.有人知道吗？

编辑:这是一个小提琴Prashant123建议的解决方案(对不起,没有足够的声誉投票你的答案!):http://jsfiddle.net/LuKSB/1/ 它已经更好了,但如果水平将是完美的按钮内的线条可见(白色).我想它会改变颜色,但它不起作用.

Answer 1

Bootstrap的变化4

所述navbar-toggler-icon自举4使用的SVG background-image.有两个版本的toggler图标图像.一个用于轻型导航栏,一个用于暗(反向)导航栏...

// 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).注意stroke='rgba(255,102,203, 0.5)'SVG数据中的值..

.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://www.codeply.com/go/4FdZGlPMNV

Answer 2

试试这个演示 html

<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>

CSS

#nav-toggle-button{
    background-color:red;
}