Bootstrap Icons

go.raybo.org/49pi

Bootstrap icons are a great way to add small graphics to your site. It's another free library from the makers of Bootstrap. Let's take a look at how it works.

Install

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" />

Download

npm i bootstrap-icons

There's a few different options for installing the icons. You have access to a CDN through this link

You can download the icons, which include some fonts by clicking on this button.

Finally, if you're working with build tools, you can npm install them.

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/></svg>

Maximum flexibility
Classes, size colors
Edit SVG
Lots of text

Icon Search

The icons are designed as SVGs, so you can add the SVG code directly into your projects. The advantage here is maximum flexibility.

You can change the size or colors, add classes and edit the code as you would any other SVGs.

To get the code, go to the website and do a search through the icons. Click on an individual element's clipboard icon to copy the HTML code to your clipboard. You also have the option of downloading the code just for that SVG, so you can edit that if you want.

Sprite

Download

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#emoji-smile" />
</svg>

Must download
Less code/smaller
Problems with chrome

Icon Search

You can also add icons by creating an svg with an element that has a use attribute. This will have a link to where the icon is and that means that this won't work with a CDN.

It's definitely a lot less code and if you're using an icon a lot on the same page, it makes your files smaller because you're using the SVG only once.

However, there are some problems when you use this with chrome accross domains.

Also, notice the way you use this is by calling the same icon and then passing along a hash with the icon name getting rid of some of what you copy.

Icon Fonts

<i class="bi bi-emoji-smile" style="text-color: red"></i>

Easiest
Less code/smaller
Styling
Usability

Icon fonts are a convenient way to use icon files because they allow you to use a simple <i> tag and use a class to activate the icon.

Like with Sprites, you end up with a lot less code and smaller files since the font is only loaded once.

Notice that the way you style these is by using text-color and that also means that their size is tied to the font size of the current element.

That reminds me. There's a bit of drama and discussion about fonts because technically SVGs are considered superior for usability.

There's one more way to use icons and that's to use a simple image tag with a link to the svg file. It's the least useful way of using these, so I'm not going to cover it.

Practice

Start End

Add an icon using fonts
Add an icon using SVGs
Change icon color/size
Adjust spacing

Let's take a look at how this works. I've got a codepen prepared for you so you can practice.

Note: I've already added bootstrap and bootstrap icons as well as the javascript to this template. Also, my codepen might look at bit different than yours.

<h1><i class="bi bi-heart-fill me-2" style="color: red; font-size: .8em;"></i>Font Icons</h1>
<h1>
  <svg xmlns="http://www.w3.org/2000/svg"
  overflow="visible" width=".8em" height=".8em"

  class="bi bi-heart-fill me-2" viewBox="0 0 16 16">


    <path

    fill="transparent" stroke="red" fill-rule="evenodd"


    d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
  </svg>SVG Icons
</h1>