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:
3 Answers
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.
If you're using bootstrap icons, Here is my simple solution in 2021, replace this code with your favorite icon class.
<Navbar.Toggle aria-controls="basic-navbar-nav">
{/* Replace your icon here */}
<i class="bi bi-gear"></i>
</Navbar.Toggle>
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;
}
Related