我有一个使用Bootstrap的网站，当屏幕尺寸小于992px时，会添加汉堡包菜单按钮。代码如下:
<button class="navbar-toggler navbar-toggler-right"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
是否有可能更改汉堡包切换按钮的颜色？
Bootstrap 4中的navbar-toggler-icon（汉堡包）使用SVG background-image。该toggler图标图像有2个“版本”，一个用于浅色导航栏，另一个用于深色导航栏...
navbar-dark以获得浅色/白色togglernavbar-light以获得深色/灰色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-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml;..");
}
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");
}
.custom-toggler.navbar-toggler {
border-color: rgb(255,102,203);
}
演示 http://www.codeply.com/go/4FdZGlPMNV
当然，还有另一种选择，就是直接使用其他库中的图标，比如Font Awesome等。
更新Bootstrap 4.0.0：
从Bootstrap 4 Beta开始，navbar-inverse现在变成了navbar-dark，用于具有较暗背景颜色的导航栏，以产生更浅的链接和切换器颜色。
.navbar-inverse 类。你可以从两个类中选择：.navbar-light 或 .navbar-dark。 - Qrzysiostroke='rgba%280, 0, 0, 0.5%29'，我将其解读为rgba(280, 0, 0, 0.5)（是的，我很蠢；280>255），当我删除并替换280时它不起作用，花了我几分钟才意识到%28是一个编码过的开括号。 - wkille使用Font Awesome图标作为您的导航栏的默认图标。
<span class="navbar-toggler-icon">
<i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>
或者在旧版 font-awesome 上尝试这个：
<span class="navbar-toggler-icon">
<i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>
如果您下载了Bootstrap，请前往bootstrap-4.4.1-dist/css/bootstrap.min.css
找到 .navbar-light .navbar-toggler-icon 或 .navbar-dark .navbar-toggler-icon 选择器
选择 background-image 属性及其值。代码片段看起来像这样：
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
复制这段代码并将其粘贴到您的自定义CSS中
将stroke='rgba(0, 0, 0, 0.5)'的值更改为您喜欢的rgba值
最简单的方法是替换这段默认的Bootstrap代码：
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
通过这个：
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
</button>
别忘了将此代码也添加到您的文件中：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
希望能对你有所帮助！
您可以很容易地只使用css创建切换按钮，无需使用任何SVG或其它格式的字体。
您的按钮：
<button
class="navbar-toggler collapsed"
data-target="#navbarsExampleDefault"
data-toggle="collapse">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
你的按钮样式：
.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;
}
水平线样式：
.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;
}
演示
.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;
border:none;
}
.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;
}<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
<span class="line"></span>
<span class="line"></span>
<span class="line" style="margin-bottom: 0;"></span>
</button>navbar-dark 或 navbar-light 即可：<nav class="navbar navbar-dark navbar-expand-md">
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
是的，只需从您的代码中删除此，然后粘贴名为bars的这个font awesome图标：<i class="fas fa-bars"></i>，为此图标添加一个类，然后将任何颜色放置其中。
然后，第二步是隐藏此图标，对于宽度大于992px（桌面宽度）的设备，因为如果您不在css代码中添加这个@media，则此图标将出现在您的界面中的任何设备上：
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
/* the class you gave of the bars icon ↑ */
.iconClass{
display: none;
}
/* the bootstrap toogler button class */
.navbar-toggler{
display: none;
}
}
这方法对我也奏效了，而且我觉得非常容易。
默认的Bootstrap导航栏图标
<span class="navbar-toggler-icon"></span>
添加FontAwesome图标并移除class="navbar-toggler-icon"
<span>
<i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>
遇到这种情况最简单的方法是使用像Font Awesome这样的字体库。
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fas fa-bars"></i></span>
</button>
然后，您可以像更改任何其他 i 元素一样更改 i 元素。
编辑：我的问题！使用我的答案，图标不会作为切换器工作 实际上，即使未折叠，它也会显示... 仍在寻找...
这将起作用：
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span>
<i class="fas fa-bars"></i>
</span>
</button>
btn替换navbar-toggler，然后像之前回答的那样，使用图标字体。请注意，如果保留<button class="navbar-toggler">，则按钮将具有“奇怪”的形状。正如在github上的帖子中所述，bootstrap使用一些“css技巧”，因此用户不必依赖字体。因此，如果要使用图标字体，请不要在您的按钮上使用"navbar-toggler"类。干杯。navbar-toggler类（我不知道其他小版本的4，因为我没有尝试过），那么它将在桌面视图上可见，因为这也是移动视图所必需的。 - Mycodingproject