interview

Home / DeveloperSection / Interviews / How to change the color of bootstrap icons?

Ask Question
Ashutosh Kumar Verma

Ashutosh Kumar Verma

Follow
Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

14-Oct-2024

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,

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
   <title>Email Input with Icon</title>
   <style>
   .icon {
       color: orange;
    }
   </style>
</head>
<body>
<div class="container mt-5">
 <h2>Change the color of icons</h2>
   <p>Using Bootstrap Class- <i class="bi bi-heart-fill text-danger"></i></p>
   <p>Using Inline CSS- <i class="bi bi-heart-fill" style="color: green;"></i> </p>
   <p>Using Internal CSS- <i class="bi bi-heart-fill icon"></i> </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
answer 6518921410050809
MindStick Training

Liked By