Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

How to change the color of bootstrap icons?

Ashutosh Patel 780 14 Oct 2024

Ashutosh Patel

Web Developer

I am a professional .NET developer with over 4 years of hands-on industry experience in designing, developing, and maintaining scalable web applications. I specialize in .NET Core, C#, RESTful APIs, and database-driven systems using SQL Server.

1 Answers

Ashutosh Patel 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>

advertising