Not able to show Font Awesome Icons-CodePudding

I'm failing to show Font Awesome icons on my app (only this page)! The icons are showing on the other pages but not on this one I don't know why! and yes I'm importing it in my 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" />

A link to codesandbox for better viewing

Here the code:

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>
  );
}

CodePudding user response：

this works on me

<!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 ></i>
    <p>SOME TEXT GOES HERE</p>
</body>
</html>

CodePudding user response：

The icon you're using doesn't exist on the style you've imported. as I see the timer icon is a pro icon. but if you choose another icon, like:

<i className="fa fa-user"></i>

then the icon is rendered.