Font Awesome CDN 4.7, 5.15, 6.5

<!DOCTYPE html>
<html>

<head>
 <link rel="stylesheet" 
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
 crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
 <div class="container">
 <h1>Font Awesome CDN 6.4 Example</h1>
 <div class="card">

</div>
 </div>
 <style>
 .container {
 margin: 0 auto;
 width: 600px;
 padding: 20px;
 display: flex;
 align-items: center;
 flex-direction: column;
 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
 }

.card {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            justify-items: center;
        }

.card i {
            font-size: 24px;
            color: #333;
            padding: 20px;
            transition: color 0.3s ease-in-out;
             box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
        }

.card i:hover {
 color: #ff0000;
 /* Change to your desired hover color */
 cursor: pointer;
 }
 </style>
</body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
 <link rel="stylesheet" 
   href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
       crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
        <div class="container">
        <h1>Font Awesome CDN 6.4 Example</h1>
        <div class="card">
            <i class="fa-brands fa-threads"></i>
            <i class="fa-brands fa-x-twitter"></i>
            <i class="fa-brands fa-facebook"></i>
            <i class="fa-solid fa-user"></i>
            <i class="fa-solid fa-envelope"></i>
            <i class="fa-solid fa-asterisk"></i> <!-- Add your desired icon class here -->
​
​
            <i class="fa-solid fa-cog"></i>
            <i class="fa-solid fa-star"></i>
            <i class="fa-solid fa-heart"></i>
            <i class="fa-solid fa-calendar"></i>
            <i class="fa-solid fa-file"></i>
​
​
            <i class="fa-solid fa-camera"></i>
            <i class="fa-solid fa-music"></i>
            <i class="fa-solid fa-play"></i>
            <i class="fa-solid fa-pause"></i>
            <i class="fa-solid fa-stop"></i>
​
            <i class="fa-solid fa-fast-forward"></i>
           
            <i class="fa-solid fa-volume-up"></i>
            <i class="fa-solid fa-volume-down"></i>
            <i class="fa-solid fa-volume-off"></i>
​
            <i class="fa-solid fa-wifi"></i>
     
            <i class="fa-solid fa-lock"></i>
            <i class="fa-solid fa-unlock"></i>
            <i class="fa-solid fa-thumbs-up"></i>
​
            <i class="fa-solid fa-thumbs-down"></i>
        </div>
    </div>
   <style>
        .container {
            margin: 0 auto;
            width: 600px;
            padding: 20px;
            display: flex;
            align-items: center;
            flex-direction: column;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
        }
​
        .card {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            justify-items: center;
        }
​
        .card i {
            font-size: 24px;
            color: #333;
            padding: 20px;
            transition: color 0.3s ease-in-out;
             box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
        }
​
        .card i:hover {
            color: #ff0000;
            /* Change to your desired hover color */
            cursor: pointer;
        }
    </style>
</body>
​
</html>