screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" /> </head> <body> <h1>Bootstrap Icons with Different Colors</h1> <div class="container"> <i class="bi bi-heart text-primary"></i> <i class="bi bi-star text-secondary"></i> <i class="bi bi-check text-success"></i> <i class="bi bi-arrow-up-right text-info"></i> <i class="bi bi-file-earmark text-warning"></i> <i class="bi bi-search text-danger"></i> <i class="bi bi-envelope text-primary"></i> <i class="bi bi-person text-secondary"></i> <i class="bi bi-calendar text-success"></i> <i class="bi bi-gear text-info"></i> <i class="bi bi-camera text-warning"></i> <i class="bi bi-music-player text-danger"></i> <i class="bi bi-basket text-primary"></i> <i class="bi bi-book text-secondary"></i> <i class="bi bi-credit-card text-success"></i> <i class="bi bi-headset text-info"></i> <i class="bi bi-people text-warning"></i> <i class="bi bi-lightning text-danger"></i> <i class="bi bi-cloud text-primary"></i> <i class="bi bi-flag text-secondary"></i> </div> <style> h1 { margin-bottom: 30px; font-family: "Arial", sans-serif; color: #333; } i { font-size: 36px; margin: 20px; } .text-primary { color: #007bff; } .text-secondary { color: #6c757d; } .text-success { color: #28a745; } .text-info { color: #17a2b8; } .text-warning { color: #ffc107; } .text-danger { color: #dc3545; } .text-primary:hover, .text-secondary:hover, .text-success:hover, .text-info:hover, .text-warning:hover, .text-danger:hover { transform: scale(1.2); transition: transform 0.2s ease-in-out; } .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .container i { transition: color 0.3s ease-in-out; } .container i:hover { color: #ff6699; } </style> </body> </html>