Using twitter bootstrap 5 icons

here are two (or more) ways of using icons from the famous CSS framework Twitter Bootstrap 5.

In this article we will show how to use icons in two different ways.

Using i tag and css class

The first method is simple and used more commonly.

<i class="bi bi-3-circle"></i>

Using Unicode in CSS

You need to first add the icons font library using import or simple add the url in the link tag of your html page.

@import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.9.1/font/bootstrap-icons.min.css);

Then using a before pseudo element:

i::before {
	display: inline-block;
	font-size: 2rem;
	color: #000;
	font-family: bootstrap-icons!important;
	font-style: normal;
	font-weight: 400!important;
	content: '\f270';
}

And html using i tag without any class:

<i></i>

Using i tag and css class
Using Unicode in CSS