Here's how you can use the new web font in your web pages.
At this stage I am not aware of a CDN (content delivery network) that hosts the Bootstrap Icons font files, so you will need to install the files on your own web server. The files are only about 229KB.
Steps 1 to 3 can be replaced by the following if you wish to use the CDN instead of hosting the font files yourself.
<link href="https://email@example.com/font/bootstrap-icons.css" rel="stylesheet">
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.
Each icon has it's own class (eg. bi-alarm), and you can find these by clicking an icon on the Bootstrap Icons website.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://firstname.lastname@example.org/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://email@example.com/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </body> </html>
by John Avis | December 22, 2020
There are many changes in Bootstrap v5, but these are some of the stand-out changes I noticed when updating a website to v5.
by John Avis | December 9, 2019
The Bootstrap team have introduced their own open-source icon set.