How to include bootstrap icons?
April 29, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, We will learn how to include and use Bootstrap icons on a web page.
Integrated bootstrap
Step 1:
To implement our bootstrap HTML file.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">Step 2: Bootstrap icon
Here we will click to open the icon in Bootstrap.
Step 3:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Step 4:
<h1><i class="bi-globe"></i> Globe</h1>
<h1><i class="bi-bank2"></i> Bank2</h1>
<h1><i class="bi-binoculars-fill"></i> Binoculars-fill</h1>
<h1><i class="bi-calendar-fill"></i> Calendar-fill</h1>Add the icon class name to any inline HTML element (such as <i> or <span>).
Bootstrap now includes over 1,300 high quality icons, which are available in SVGs, SVG sprite, or web fonts format. You can use them with or without Bootstrap in any project.
Use Bootstrap Icons in Your Code
To use Bootstrap icons in your code you’ll require an <i> tag with an individual icon class .bi-* applied on it. The general syntax for using Bootstrap icons is:
<i class="bi-class-name"></i>
Example
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<h1><i class="bi-globe"></i> Globe</h1>
<h1><i class="bi-bank2"></i> Bank2</h1>
<h1><i class="bi-binoculars-fill"></i> Binoculars-fill</h1>
<h1><i class="bi-calendar-fill"></i> Calendar-fill</h1>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>In the above code, we have used .bi-* class to use icons in bootstrap
Check the output of the above code example.
Similarly, you can place Font Awesome icons inside the navs, forms, tables, paragraphs, and other components in the same way as you do with Bootstrap icons.
All the best 👍
