Question

我试图使某些图标显示在此处的文档中：https://react-bootstrap.netlify.com/components/navbar/，但是我似乎无法获得相同的结果：

<Nav.Item>
  <Nav.Link className="text-white" target="_blank" href="#">
    <OverlayTrigger
      placement="bottom"
      overlay={
        <Tooltip id={"tooltip-bottom"}>
          GitHub
      </Tooltip>
      }
    >
      <FontAwesomeIcon icon={faGithub} />
    </OverlayTrigger>
  </Nav.Link>
</Nav.Item>

有人知道如何使图标看起来像文档中那样吗？

Answer 1

确保已添加软件包@fortawesome/react-fontawesome和@fortawesome/free-solid-svg-icons。

然后，您可以将它们导入组件中。

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDatabase } from '@fortawesome/free-solid-svg-icons'

您可以像这样在项目中使用它们：

<FontAwesomeIcon icon={faDatabase} />

如果您进入node_modules/@fortawesome/free-solid-svg-icons目录，则会看到一堆Typescript（.ts）文件。这些文件代表图标。

我在那里找不到Git图标，所以可能是它没有显示的原因。但是，Git图标在@ fortawesome / fontawesome-free软件包中作为SVG提供。缺点是我认为您不能在组件上使用SVG图标。这意味着您可能需要为此找到其他解决方法。

我如何像在react-bootstrap文档中一样在导航栏中显示fontawesome图标？

1 个答案: