css - React-Bootstrap:使用 Font Awesome SVG 自定义 Navbar 的汉堡菜单

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

这就是它对我有用的方式。只需插入 <span> Navbar.Toggle 中带有图标的元素。像这样:

<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>无论如何，它仍然有效。