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

【问题标题】：React-Bootstrap: Customize Navbar's hamburger menu with Font Awesome SVGReact-Bootstrap：使用 Font Awesome SVG 自定义 Navbar 的汉堡菜单
【发布时间】：2020-02-01 02:52:30
【问题描述】：

我正在使用 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 切换器？

【问题讨论】：

标签： css twitter-bootstrap navbar font-awesome react-bootstrap

【解决方案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> ，它仍然有效。

【讨论】：