问题
I've been using bootstrap for a while. I'm wondering if there's way to change the bootstrap toggler icon.
回答1:
It's defined in bootstrap.min.css as:
.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")
}
So, overriding this with your own image, as shown below is reasonably straight-forward:
.navbar-light .navbar-toggler-icon {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-512.png");
}
回答2:
It's actually an svs comes with bootstrap, you can't simply change the icon unless you use your own customised one. :)
回答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);
}
this code is responsible to generate the nav icon. replace the image you get a new look.
来源：https://stackoverflow.com/questions/65161206/how-to-change-bootstrap-navbar-toggler-icon