如何更改 Bootstrap 4 导航栏汉堡图标颜色？-css教程-PHP中文网

如何更改 Bootstrap 4 导航栏汉堡图标颜色？

Susan Sarandon

发布： 2024-12-12 17:47:15

原创

495 人浏览过

How Can I Change the Bootstrap 4 Navbar Hamburger Icon Color?

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

Bootstrap 4 为较小的屏幕尺寸提供了汉堡菜单图标，如下所示代码：

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

登录后复制

此图标显示为黑底白字背景或浅色背景上的深色。但是，您可能希望调整其颜色以适合您的设计愿景。

自定义图标

为了自定义图标的颜色，Bootstrap 4 使用 SVG 背景图像。根据导航栏背景颜色使用不同的 SVG。

.navbar-light .navbar-toggler-icon：浅色背景不透明度为 50% 的黑色图标
.navbar-dark .navbar-toggler-icon：白色图标，深色不透明度为 50%背景

例如，要将图标的颜色更改为粉红色，请使用以下 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");
}

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

登录后复制

替代方法

An自定义图标的替代方法是使用不同的图标库，例如 Font Awesome。这提供了对图标外观的更大灵活性和控制。

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