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 1464 14 Oct 2024

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

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.