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

Question

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:

Answer 1

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.

Answer 2

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>