React 无法呈现字体真棒图标

Question

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

这是我的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>

这是 header.js 文件，我目前在 Nav.link 中使用它，none 用户或购物车图标正在渲染。

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

Answer 1

class 名字有错字 className="fas fa-user" 应该是 className="fa fa-user".

Answer 2

不要在 Link 标签

中使用字体 awesome css 的完整性属性

这应该有效

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

Answer 3

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

我个人比较喜欢webfontshttps://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

导入非常简单

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

React 无法呈现字体真棒图标

React cannot render font awesome icon

font-awesome

bootswatch

reactjs

react-bootstrap

font-awesome-5