如何更改 Bootstrap 4 导航栏切换器图标颜色？

修改 Bootstrap 4 导航栏按钮图标颜色

Bootstrap 4 的导航栏切换器图标（由汉堡包图标表示）使用 SVG 背景图像。图标图像有两种变体：一种用于浅色背景，另一种用于深色背景。

要指定切换器的颜色，您可以使用以下类：

• 导航栏-dark：在较暗的情况下显示浅色/白​​色切换器
• navbar-light：在浅色背景上显示深色/灰色切换器。

但是，如果您想进一步自定义切换器的颜色，您可以可以创建自定义图标。例如，下面的代码片段使用 SVG 数据中的 lines='rgba(255,102,203, 0.5)' 值将切换器颜色设置为粉红色 (255, 102, 203)：

.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 Beta 开始，navbar-inverse 类已替换为 navbar-dark导航栏背景较暗，导致链接和切换器颜色较浅。

以上是如何更改 Bootstrap 4 导航栏切换器图标颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！