如何更改 Bootstrap 4 导航栏按钮图标颜色？

Question

我有一个 Bootstrap 网站，当屏幕尺寸小于 992 像素时，会添加汉堡切换器。代码是这样的：

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

有没有可能改变汉堡切换按钮的颜色？

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

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

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

OFC，另一种仅使用来自另一个库的图标的选项，即：Font Awesome 等。

---

更新引导程序 4.0.0：

从 Bootstrap 4 Beta 开始， navbar-inverse 现在是 navbar-dark 用于具有较深背景颜色的导航栏以产生较浅的链接和切换器颜色。

---

如何更改 Bootstrap 4 导航栏颜色

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

Answer 2

使用 超棒的字体图标 作为导航栏的默认图标。

 <span class="navbar-toggler-icon">
    <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

或者在旧的字体真棒版本上试试这个：

 <span class="navbar-toggler-icon">
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>

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