screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> <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> </head> <body> <div class="container"> <h1>Font Awesome CDN 6 Example</h1> <div class="card"> <i class="fa-solid fa-house"></i> <i class="fa-solid fa-magnifying-glass"></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> </body> </html>