Bootstrap 4更改汉堡包Toggler颜色

Question

我有一个bootstrap网站，当屏幕小于992px时添加Hamburger。 HamBurger代码是这样的

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

有没有可能改变HamBurger按钮的颜色？

Answer 1

Bootstrap 4中的navbar-toggler-icon（汉堡包）使用SVG background-image。切换器图标图像有2个“版本”。一个用于轻型导航栏，一个用于暗导航栏...

• 在较暗的背景上使用navbar-dark作为浅色/白色切换器
• 使用navbar-light在较浅的背景上使用深色/灰色切换器

---

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

因此，如果要将切换器图像的颜色更改为其他颜色，可以自定义图标。例如，在这里我将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");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 

但是ku zxsw指出

OFC，另一种选择，只使用另一个库中的图标即：Font Awesome等。

---

更新Bootstrap 4.0.0：

从Bootstrap 4 Beta开始，http://www.codeply.com/go/4FdZGlPMNV现在是navbar-inverse，用于具有较深背景颜色的导航栏，以产生更轻的链接和切换颜色。

---

navbar-dark

Answer 2

只需在默认图标范围内的“i”标签中使用font-awesome，然后使用CSS更改添加图标的颜色。

How to change Bootstrap 4 Navbar colors

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon"></i>
</span>

Answer 3

编辑：我的坏！根据我的回答，图标不会像切换器一样实际上，即使没有折叠也会显示...仍在搜索...

这可行：

.fa.fa-navicon {
  color:white;
}

我的答案提出的技巧是用经典的按钮类

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

替换navbar-toggler然后，如前所述，使用图标字体。

请注意，如果保留btn，按钮将具有“奇怪”形状。

正如在这个<button class="navbar-toggler">中所述，bootstrap使用了一些“css trickery”，因此用户不必依赖字体。

因此，如果您想使用图标字体，请不要在按钮上使用post on github类。

干杯。

Answer 4

您只能以非常简单的方式使用css创建切换按钮，无需使用SVG或...格式的任何字体。

你的按钮：

"navbar-toggler"

您的按钮样式：

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

Answer 5

如果您在

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

中使用sass版本的bootstrap，您可以找到_variables.scss或$navbar-inverse-toggler-bg，您可以在其中更改切换按钮的颜色和样式。

在html中，您必须使用$navbar-light-toggler-bg或navbar-inverse，具体取决于您要使用的版本。

Answer 6

作为替代方案，您始终可以使用其他图标尝试更简单的解决方法，例如：

navbar-light

ref：

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

ref：

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

因此，您可以完全控制其颜色和大小：

https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

（应用按钮的样式仅用于快速测试）：

Answer 7

只需在nav元素中插入类或navbar-dark：

navbar-light

Answer 8

检查自定义汉堡包导航的最佳解决方案。

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.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,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>