Add Bootstrap icons in a Bootstrap5 subtheme

Add some graphical spice to your theme with the Bootstrap Icons:

Free, high quality, open source icon library with over 2,000 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts. Use them with or without Bootstrap in any project.

From https://icons.getbootstrap.com/

There are several benefits to embedding and self hosting your icons directly in Bootstrap5. Pages load faster, user privacy is respected, and you don't rely on a third-party, which can become inaccessible.

In this example, it is assumed that you are using a sub-theme with the machine name b5subtheme.

How to include Bootstrap Icons in a Bootstrap5 sub-theme

1. Download the Bootstrap icon library:
   

   composer require twbs/bootstrap-icons

2. Copy the Bootstrap library into your sub-theme (or symlink, see below):
   

   cp -r vendor/twbs/bootstrap-icons web/themes/custom/b5subtheme/bootstrap-icons

3. Register the path to the Bootstrap icons CSS file in b5subtheme.libraries.yml by adding this line:
   

   global-styling:
     css:
       theme:
         bootstrap-icons/font/bootstrap-icons.css: {}

After clearing caches, the Bootstrap icons should now be ready for use, either via classes ("Droplet"):

<i class="bi bi-droplet"></i>

.. or via CSS ("Globe Europe Africa"):

ol {
  list-style-type: none;
}
ol li {
  margin-left: -1em;
  display: flex;
  gap: .5rem;
  line-height: 1.3em;
}
ol li:before {
  font-family: 'bootstrap-icons';
  content: "\f885";
  color: lightgreen;
}

You can see an example of both methods on this page, in the plus/minus icons and the info icon: https://arst.dk/kommune/kobenhavn.

Alternative symlink method

In stead of copying the Bootstrap icon library, you can create a symlink like this:

ln -s vendor/twbs/bootstrap-icons web/themes/custom/b5subtheme/bootstrap-icons

Using a symbolic link, your icon library will automatically update whenever you run composer upgrade. As not all configurations allow symbolic links, you have to try whether copying or symbolic linking the icons works for you. Search for 'symbolic link' to learn as how to make it work in your OS.