Document how to integrate and use Bootstrap icons

This is how it worked for me:

First, use composer to install the icons using composer
composer require twbs/bootstrap-icons

This puts the bootstrap-icons stuff into
../vendor/twbs/bootstrap-icons

Next I copied and renamed this folder to
/web/themes/contrib/bootstrap5/dist/icons

Now you have to edit bootstrap5.libraries.yml:

base:
  version: VERSION
  css:
    component:
      …
      css/components/icons.css:
        weight: -10

… 

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

To show the icon using CK-Editor5, you cannot use the <i> tag, as CKE5 zaps it. I went with

<span class="bi-globe-europe-africa display-1 text-danger">&nbsp;</span>&nbsp;<br>

instead - voilá:

Thanks for your comment @nofue, it was very helpful!

I wasn't sure what to do at the edit bit, so just to clarify for anyone else in doubt, with these steps I added icons to a Bootstrap5 sub-theme:

1. Download the Bootstrap icon library:
   composer require twbs/bootstrap-icons
2. Copy the Bootstrap library into your sub-theme (adjust theme path):
   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:

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

You can now style a list like this:

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;
}

Based on the great example in Using Font Awesome icon for bullet points, with a single list item element, thanks @Chike!

I created the page Add Bootstrap icons in a Bootstrap5 subtheme → .

Automatically closed - issue fixed for 2 weeks with no activity.