React-Bootstrap: Customize Navbar's hamburger menu with Font Awesome SVG

user_3875620 0
Viewed 2457

I'm using React-Bootstrap and building a Navbar. I want to replace the React-Bootstrap hamburger menu icon with a Font Awesome hamburger icon.

How do I go about changing the built in hamburger menu? Here is my Navbar:

<Navbar expand="lg">
   <Navbar.Brand href="#home">
      <FontAwesomeIcon icon="gem" color="#20FC8F" size="2x" />
   </Navbar.Brand>
   <Navbar.Toggle aria-controls="basic-navbar-nav"/>
   <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
         <Nav.Link href="#home">Home</Nav.Link>
         <Nav.Link href="#link">Link</Nav.Link>
      </Nav>
   </Navbar.Collapse>
</Navbar>

I am importing the Font Awesome icon I want to use and displaying it like this:

    <FontAwesomeIcon icon="bars" color="#20FC8F" size="2x" />;

How can I use this in place of the React-Bootstrap toggler?

font-awesome navbar react-bootstrap twitter-bootstrap css
1 Answers

This is how it worked for me. Simply insert <span> element with icon in Navbar.Toggle. Like this:

<Navbar expand="lg">
   <Navbar.Brand href="#home">
      <FontAwesomeIcon icon="gem" color="#20FC8F" size="2x" />
   </Navbar.Brand>
   <Navbar.Toggle aria-controls="basic-navbar-nav">
    <span>
      <FontAwesomeIcon
        icon="bars" color="#20FC8F" size="2x"
      />
    </span>
  </Navbar.Toggle>
   <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
         <Nav.Link href="#home">Home</Nav.Link>
         <Nav.Link href="#link">Link</Nav.Link>
      </Nav>
   </Navbar.Collapse>
</Navbar>

You can actually omit <span> all whatsoever and it still works.

user_103528970
Related