Question

我正在使用React-Bootstrap并构建一个Navbar。我想用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>，并且仍然可以使用。

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

1 个答案: