我无法在我的应用程序上显示字体真棒图标(仅此页面(！图标显示在其他页面上，但没有显示在这个页面上，我不知道为什么！是的，我正在我的index.html 中导入它
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
链接到codesandbox以更好地查看
这里的代码：
export default function Post({ post }) {
return (
<div className="coupon-container">
<div className="coupon">
<div className="content">
<h2>TITLE GOES HERE</h2>
<h1>
TEXT <span>TEXT</span>
</h1>
</div>
<div className="couponValidity">
<i className="fa fa-solid fa-timer"></i>
<p>SOME TEXT GOES HERE</p>
</div>
</div>
</div>
);
}
导入的样式中不存在您正在使用的图标。在我看来，计时器图标是专业图标。但如果你选择另一个图标，比如：
<i className="fa fa-user"></i>
则图标被渲染。
这对我的有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
</head>
<body>
<i class="fa fa-user"></i>
<p>SOME TEXT GOES HERE</p>
</body>
</html>