如何自定义 Bootstrap 4 导航栏汉堡菜单图标颜色？

自定义 Bootstrap 4 导航栏按钮图标颜色

在 Bootstrap 4 中，当屏幕尺寸低于 992 像素时，会出现汉堡切换按钮。要自定义其颜色，您可以使用 navbar-toggler-icon 类。

导航栏颜色上下文：

汉堡切换器图标有两个背景图像：

• 导航栏灯：白色灯光图标背景。
• 导航栏深色：深色背景的黑色图标。

更改图标颜色：

要覆盖默认颜色，您可以通过 CSS 自定义图标。这是一个示例：

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

此 CSS 将图标颜色设置为粉红色。请注意 SVG 数据中的描边属性，它决定了图标颜色。

其他样式：

要使图标的边框与图标颜色相匹配，您可以添加以下样式：

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

替代方法：

或者，您可以使用外部库中的图标，例如 Font Awesome，并独立设置它们的样式。

已更新至 Bootstrap 4.0.0：

在 Bootstrap 4.0.0 中，navbar-inverse 已重命名为navbar-dark 用于深色背景的导航栏。

其他自定义选项：

有关自定义 Bootstrap 4 导航栏颜色的更多详细信息，请参阅官方文档：https://getbootstrap.com/docs/4.0/components/navbar/#colors

以上是如何自定义 Bootstrap 4 导航栏汉堡菜单图标颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！