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

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

Bootstrap 4 采用独特的 SVG 背景图像作为其导航栏切换图标（汉堡包）。此图标有两种变体：一种用于浅色背景导航栏，另一种用于深色背景导航栏。

自定义图标颜色

如果默认为黑色或白色不适合您的设计，您可以自定义图标的颜色。例如，要将其更改为粉红色，请调整 SVG 数据中的笔划值，如下所示：

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

或者，使用第三方图标库

您还可以将默认图标替换为第三方库中的图标，例如 Font Awesome。这种方法提供了对图标外观的更大灵活性和控制。

Bootstrap 4.0.0 中的更改

在 Bootstrap 4 Beta 中，navbar-inverse 类已替换为导航栏-黑暗。此类旨在与较暗背景的导航栏一起使用，并生成较浅的链接和切换器颜色。

其他资源

• [更改 Bootstrap 4 导航栏颜色](https://getbootstrap.com/docs/4.0/components/navbar/#how-to-change-navbars-colors)

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