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

John Avis by | 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.
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>

Related Posts

What's new in Bootstrap v5

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.


Bootstrap Icons in Alpha

by John Avis | December 9, 2019

The Bootstrap team have introduced their own open-source icon set.


What's new in Bootstrap 4.4.0 and 4.4.1?

by John Avis | November 27, 2019

Read about the two major improvements in Bootstrap 4.4.0, released 26 November 2019.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment

Tags

About

...random postings about web development and programming, Internet, computers and electronics topics.

I recommend ASPnix for web hosting and Crazy Domains for domain registration.

Subscribe

Get the latest posts delivered to your inbox.