CODEWITHSUNDEEP
reactjsfrontendreact-bootstrap
iamtheasad
iamtheasad

Reputation: 1127

How to change react-bootstrap navbar-toggler-icon button and button color

I am trying to change the react-bootstrap navbar-toggler-icon to the font-awesome icon and also change the icon color.

Image for details:

enter image description here

Upvotes: 9

Views: 11287

Answers (3)

Tilahun Feyissa
Tilahun Feyissa

Reputation: 9

just go to your custom css file and add background image for .navbar-toggler-icon example

.navbar-toggler-icon{
background-image:url('../../resources/Images/Home/navicon2.png') !important;

}

Upvotes: 0

Asela Priyadarshana
Asela Priyadarshana

Reputation: 814

If you're using bootstrap icons, Here is my simple solution in 2021, replace this code with your favorite icon class.

Boostrap icons

<Navbar.Toggle aria-controls="basic-navbar-nav">
  {/* Replace your icon here */}
  <i class="bi bi-gear"></i>
</Navbar.Toggle>

Upvotes: 2

dogukyilmaz
dogukyilmaz

Reputation: 615

Find the Navbar.Toggle or directly Toggle (how it was imported, you'll see) in related navbar section.

<Navbar.Toggle aria-controls="basic-navbar-nav" />

As default and basicly it looks like this. Bootstrap's default is like what you see currently.

<Navbar.Toggle aria-controls="basic-navbar-nav"> <YOUR ICON /> </Navbar.Toggle>

Just add icon as a children inside Navbar.Toggle then you can style whatever you want.

Upvotes: 19

Related Questions