React-Bootstrap:使用Font Awesome SVG自定义Navbar的汉堡菜单 [英] React-Bootstrap: Customize Navbar's hamburger menu with Font Awesome SVG

问题描述

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

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.

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

How do I go about changing the built in hamburger menu? Here is my Navbar:

<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图标，并显示如下:

I am importing the Font Awesome icon I want to use and displaying it like this:

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

如何使用它代替React-Bootstrap切换器?

How can I use this in place of the React-Bootstrap toggler?

推荐答案

这就是它的工作方式.只需在Navbar.Toggle中插入带有图标的< span> 元素即可.像这样:

This is how it worked for me. Simply insert <span> element with icon in Navbar.Toggle. Like this:

<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> ，并且仍然可以使用.

You can actually omit <span> all whatsoever and it still works.

这篇关于React-Bootstrap:使用Font Awesome SVG自定义Navbar的汉堡菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！