With the release of Bootstrap Icons v1.10, there is now an easy-to-use web font. Here’s how you can use the new web font in your web pages.
Step 1 – Download the Bootstrap Icons files
Go to icons.getbootstrap.com and download the latest release. There is a download button at the top-right corner of the page.
Step 2 – Install the Bootstrap Icons files
To use the web font on your web site you will need to extract a few files from the ZIP file.
From the fonts folder you will need bootstrap-icons.css and the fonts folder (the one inside the first fonts folder) with the bootstrap-icons.woff and bootstrap-icons.woff2 files.
Copy the CSS file and fonts folder to your website. You can copy the files to your web root folder but typically you would copy them to a folder that contains your other CSS files.
Step 3 – Include the Bootstrap Icons CSS file in your web pages
To be able to use the fonts in your web pages you will need to include the bootstrap-icons CSS file in your HEAD section of your HTML. How this is done will vary on the type of website. If you have simple HTML pages then you would need to add this to each page where you want to use the web font. If you are using a content management system like WordPress then this can be done in a template. If you are not sure use Google to search for how to add a CSS file to your CMS.
To include the CSS file you would add something like this:
<link href="bootstrap-icons.css" rel="stylesheet">
(CSS file is in same folder as the HTML document)
<link href="/bootstrap-icons.css" rel="stylesheet">
(CSS file is in your web root folder)
<link href="/css/bootstrap-icons.css" rel="stylesheet">
(CSS file is in your CSS folder)
Step 4 – Using the Bootstrap Icons web font
To include one of the icons you simply add the web font code that you can find on the Bootstrap Icons website.
For example:
<i class="bi-alarm"></i>
Each icon has it’s own class (eg. bi-alarm), and you can find these by clicking an icon on the Bootstrap Icons website.
Full example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link href="bootstrap-icons.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h1>Bootstrap Icons v1.2 Example</h1>
<p>
<i class="bi-alarm"></i>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>