How to change bootstrap navbar toggler icon?

Question

I've been using bootstrap for a while. I'm wondering if there's way to change the bootstrap toggler icon.

https://stackoverflow.com/questions/42586729/bootstrap-4-change-hamburger-toggler-color. — Mobarak Ali, Dec 05 '20 at 19:58
https://stackoverflow.com/questions/53558783/best-way-to-change-bootstrap-4-hamburger-icon-to-three-dots-menu-icon-using-only — Mobarak Ali, Dec 05 '20 at 20:03

score 2 · Answer 1 · answered Dec 05 '20 at 19:56

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

score 0 · Answer 2 · answered Dec 05 '20 at 19:49

0

It's actually an svs comes with bootstrap, you can't simply change the icon unless you use your own customised one. :)

answered Dec 05 '20 at 19:49

M_W

66
2
14

score 0 · Accepted Answer · answered Dec 05 '20 at 19:51

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

How to change bootstrap navbar toggler icon?

3 Answers3

Linked