React-Bootstrap：使用 Font Awesome SVG 自定义导航栏的汉堡菜单

Question

我正在使用 React-Bootstrap 并构建一个导航栏。我想用 Font Awesome 汉堡包图标替换 React-Bootstrap 汉堡包菜单图标。

如何更改内置汉堡菜单？这是我的导航栏：

<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>

我正在导入我想要使用的 Font Awesome 图标并像这样显示它：

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

我如何使用它来代替 React-Bootstrap 切换器？

Answer 1

这对我来说就是这样的。只需在 Navbar.Toggle 中插入<span>带有图标的元素即可。像这样：

<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>

实际上，您可以省略<span>所有内容，但它仍然有效。