title: React-Bootstrap: Customize Navbar's hamburger menu with Font Awesome SVG
body: <p>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.</p>
  
  <p>How do I go about changing the built in hamburger menu? Here is my Navbar:</p>
  
  <pre><code>&lt;Navbar expand="lg"&gt;
     &lt;Navbar.Brand href="#home"&gt;
        &lt;FontAwesomeIcon icon="gem" color="#20FC8F" size="2x" /&gt;
     &lt;/Navbar.Brand&gt;
     &lt;Navbar.Toggle aria-controls="basic-navbar-nav"/&gt;
     &lt;Navbar.Collapse id="basic-navbar-nav"&gt;
        &lt;Nav className="mr-auto"&gt;
           &lt;Nav.Link href="#home"&gt;Home&lt;/Nav.Link&gt;
           &lt;Nav.Link href="#link"&gt;Link&lt;/Nav.Link&gt;
        &lt;/Nav&gt;
     &lt;/Navbar.Collapse&gt;
  &lt;/Navbar&gt;
  </code></pre>
  
  <p>I am importing the Font Awesome icon I want to use and displaying it like this:</p>
  
  <pre><code>    &lt;FontAwesomeIcon icon="bars" color="#20FC8F" size="2x" /&gt;;
  </code></pre>
  
  <p>How can I use this in place of the React-Bootstrap toggler?</p>