How to change the color of bootstrap icons?

Question

Ashutosh Kumar Verma · Answer

Changing the color of Bootstrap icons (or any icon, such as Font Awesome) can be easily done using CSS. Below are some ways to use the example,
andlt;!DOCTYPE html>
andlt;html lang="en">
andlt;head>
   andlt;meta charset="UTF-8">
   andlt;meta name="viewport" content="width=device-width, initial-scale=1.0">
   andlt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   andlt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
   andlt;title>Email Input with Iconandlt;/title>
   andlt;style>
   .icon {
       color: orange;
    }
   andlt;/style>
andlt;/head>
andlt;body>
andlt;div class="container mt-5">
 andlt;h2>Change the color of iconsandlt;/h2>
   andlt;p>Using Bootstrap Class- andlt;i class="bi bi-heart-fill text-danger">andlt;/i>andlt;/p>
   andlt;p>Using Inline CSS- andlt;i class="bi bi-heart-fill" style="color: green;">andlt;/i> andlt;/p>
   andlt;p>Using Internal CSS- andlt;i class="bi bi-heart-fill icon">andlt;/i> andlt;/p>
andlt;/div>
andlt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">andlt;/script>
andlt;/body>
andlt;/html>

interview

How to change the color of bootstrap icons?

Ashutosh Kumar Verma

Can you answer this question?

1 Answers

Liked By