CSS Bootstrap Icons
CSS
Font Awesome is an icon library and it provides scalable vector graphics that can be styled using standard CSS properties.
Bootstrap Icons
➔ Bootstrap is a popular icon library based on CSS and SVG.
➔ Bootstrap uses inline elements to apply styles.
➔ Typically, the <i> and <span> elements are widely used for icons.
➔ Apply CSS styles to the container to change the style of the icon.
How to use Bootstrap Icons :
1. Installation Bootstrap Icons:
- Method 1 (CDN CSS-only link):
- Method 2: use @import rule in style tags inside the head (alternatively).
- Method 3 (Self-Hosting, need to download and reference to head using link tag.):
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>
<style>
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
</style>
a. Download the compiled CSS and JS files from the official Bootstrap icons website>
b. Extract the archive and copy the font directory to your project's assets folder (e.g., your_project/assets/fonts/).
c. Copy the bootstrap-icons.css file from the extracted archive to your project's CSS folder (e.g. your_project/css/).
d. Link the path to the CSS file in the head of your HTML document. <link rel="stylesheet" href="css/bootstrap-icons.css">
e. Use icons in HTML with appropriate bootstrap class names anywhere in the HTML body. <i class="bi bi-home"></i>
<head>
<link rel="stylesheet" href="css/bootstrap-icons.css">
</head>
2. Adding Icons to HTML using container.
Check out the icons you need from here. Search Bootstrap Icons
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>
<body>
<p>Bootstrap Icons Example</p>
<i class="bi bi-alarm"></i><br>
<i class="bi bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i><br>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
3. Apply CSS styles to Bootstrap Icons using container.
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
</style>
</head>
<body>
<p>Bootstrap Icons Example</p>
<i class="bi bi-alarm"></i><br>
<i class="bi bi-alarm-fill" style="font-size: 1rem;"></i><br>
<i class="bi bi-alarm" style="font-size: 2rem;"></i><br>
<i class="bi bi-alarm text-danger" style="font-size: 3rem;"></i><br>
<i class="bi bi-alarm" style="font-size: 4rem; color: red;"></i><br>
<i class="bi bi-alarm" style="font-size: 5rem; color: cornflowerblue;"></i><br>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.