我有一个 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>
是否可以更改汉堡包切换按钮的颜色?
最佳答案
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 等。
更新 Bootstrap 4.0.0:
从 Bootstrap 4 Beta 开始,navbar-inverse
现在是 navbar-dark
,用于背景颜色较深的导航栏以产生较亮的链接和切换器颜色。
关于css - 如何更改 Bootstrap 4 导航栏按钮图标颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42586729/