React 无法渲染字体真棒图标
Posted
技术标签:
【中文标题】React 无法渲染字体真棒图标【英文标题】：React cannot render font awesome icon 【发布时间】：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
【问题讨论】：
【参考方案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，所以不能说为什么它不起作用，抱歉。以上是关于React 无法渲染字体真棒图标的主要内容，如果未能解决你的问题，请参考以下文章