如何更改引导导航栏切换器图标？ [复制]答案

【问题标题】：How to change bootstrap navbar toggler icon? [duplicate]如何更改引导导航栏切换器图标？ [复制]
【发布时间】：2021-03-17 13:09:18
【问题描述】：

我一直在使用引导程序。我想知道是否有办法更改引导切换图标。

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

它实际上是一个带有引导程序的svs，除非您使用自己的自定义图标，否则您不能简单地更改图标。 :)

【讨论】：

【解决方案2】：

在 bootstrap.min.css 中定义为：

.navbar-light .navbar-toggler-icon {
 background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30'
 xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)'
 stroke-width='2' stroke-linecap='round' stroke-miterlimit='10'
 d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

所以，用你自己的图像覆盖它，如下所示是相当简单的：

.navbar-light .navbar-toggler-icon {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-512.png");
}

【讨论】：

【解决方案3】：

.navbar-dark .navbar-toggler-icon {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);
}

此代码负责生成导航图标。更换图片你会焕然一新。

【讨论】：