React 无法渲染字体真棒图标答案

【问题标题】：React cannot render font awesome iconReact 无法渲染字体真棒图标
【发布时间】：2021-12-13 01:04:11
【问题描述】：

我在我的项目中使用了字体很棒的购物车图标。但由于某种原因，该图标没有在我的环境中呈现。

这是我的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>ProShop</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

这是我目前在 Nav.link 中使用的 header.js 文件，没有呈现任何用户或购物车图标。

import React from 'react'
import { Navbar, Nav, Container, Row } from 'react-bootstrap'

function Header() {
    return (
        <header>
            <Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
                <Container>
                    <Navbar.Brand href="/">ProShop</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="mr-auto">
                        <Nav.Link href="/cart"><i className="fas fa-shopping-cart">Cart</i></Nav.Link>
                        <Nav.Link href="/login"><i className="fas fa-user">Login</i></Nav.Link>
                        
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </header>
    )
}

export default Header

【问题讨论】：

标签： reactjs font-awesome react-bootstrap font-awesome-5 bootswatch

【解决方案1】：

类名className="fas fa-user"有错别字，应该是className="fa fa-user"。

【讨论】：

不，它是正确的。请查看文档

【解决方案2】：

不要在你的链接标签中使用字体真棒css的完整性属性

这应该可以工作

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

【讨论】：

是的，它有效，但为什么我需要删除完整性属性？

【解决方案3】：

据我所知，您应该使用其中一种方法将 fontawesome 导入您的项目https://fontawesome.com/start

我个人更喜欢网络字体https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

很容易导入

只需下载存档
将内容导出到您的项目中（/src 文件夹）
将all.min.css 导入您的App.js
享受

【讨论】：

以前我只使用 CDN 版本的 font-swesome 并且它曾经工作正常，但不知道为什么它不起作用，Sunil 的回答对我有用但我不明白为什么我需要删除完整性吗？
好吧，我从来没有使用过<link /> 将某些东西导入 React，所以不能说为什么它不起作用，抱歉。