Telstra BigPond and the message content rejected due to suspected spam error

How to use the new Bootstrap Icons v1.2 web font

by johna | December 12, 2020 | Bootstrap

With the release of Bootstrap Icons v1.2, there is now an easy-to-use web font.

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.

Update: As of v1.3 there is now a CDN.

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://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet">

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>