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>