xxxxxxxxxx<html><head> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" /></head><body> <div class="container"> <h1 class="text-center">Font Awesome CDN 5 Example</h1> <div class="card"> <div> <i class="fas fa-home"></i> <span>Home</span> </div> <div> <i class="fas fa-user"></i> <span>User</span> </div> <div> <i class="fas fa-search"></i> <span>Search</span> </div> <div> <i class="fas fa-heart"></i> <span>Heart</span> </div> <div> <i class="fas fa-camera"></i> <span>Camera</span> </div> <div> <i class="fas fa-paper-plane"></i> <span>Paper Plane</span> </div> <div> <i class="fas fa-music"></i> <span>Music</span> </div> <div> <i class="fas fa-code"></i> <span>Code</span> </div> <div> <i class="fas fa-envelope"></i> <span>Envelope</span> </div> <div> <i class="fas fa-shopping-cart"></i> <span>Shopping Cart</span> </div> <div> <i class="fas fa-file"></i> <span>File</span> </div> <div> <i class="fas fa-camera"></i> <span>Camera</span> </div> <div> <i class="fas fa-music"></i> <span>Music</span> </div> <div> <i class="fas fa-play"></i> <span>Play</span> </div> <div> <i class="fas fa-pause"></i> <span>Pause</span> </div> <div> <i class="fas fa-stop"></i> <span>Stop</span> </div> <div> <i class="fas fa-fast-forward"></i> <span>Forward</span> </div> <div> <i class="fas fa-volume-up"></i> <span>Volume Up</span> </div> <div> <i class="fas fa-volume-down"></i> <span>Volume Down</span> </div> <div> <i class="fas fa-volume-off"></i> <span>Volume Off</span> </div> <div> <i class="fas fa-wifi"></i> <span>Wifi</span> </div> <div> <i class="fas fa-lock"></i> <span>Lock</span> </div> <div> <i class="fas fa-unlock"></i> <span>Unlock</span> </div> <div> <i class="fas fa-thumbs-up"></i> <span>Thumbs Up</span> </div> <div> <i class="fas fa-thumbs-down"></i> <span>Thumbs Down</span> </div> </div> </div> <style> body { background-color: #f8f9fa; } .container { margin: 20px auto; max-width: 600px; padding: 20px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); background-color: #fff; border-radius: 8px; } .card { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; justify-items: center; margin-top: 20px; } .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); border-radius: 50%; } .card i:hover { color: #ff0000; /* Change to your desired hover color */ cursor: pointer; } .card span { display: block; text-align: center; } @media (max-width: 576px) { .container { margin: 10px; padding: 10px; } .card { grid-template-columns: repeat(2, 1fr); gap: 10px; } } </style></body></html>