Иконки Bootstrap Icons

В сам Bootstrap иконки не входят. У проекта есть отдельный бесплатный набор Bootstrap Icons — больше двух тысяч иконок в одном стиле. Их подключают как шрифт: иконка — это пустой тег с классом, а её цвет и размер задаются так же, как у текста.

Подключение

Через CDN добавьте ещё одну строку <link> рядом со стилями Bootstrap:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
 
<i class="bi bi-check-circle"></i> Готово

Перед словом «Готово» появилась иконка галочки в круге. В проекте на Vite иконки ставят командой npm install bootstrap-icons и подключают в src/main.js строкой import 'bootstrap-icons/font/bootstrap-icons.css';.

Как вставить иконку

Каждой иконке нужны два класса: общий bi и имя иконки bi-{имя}. Имена ищут на сайте icons.getbootstrap.com.

У многих иконок есть закрашенный вариант с окончанием -fill.

Размер и цвет

Иконка — символ шрифта, поэтому ей подходят утилиты текста: fs-* для размера и text-{цвет} для цвета.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
 
<i class="bi bi-lightning-charge fs-1 text-primary" aria-hidden="true"></i>
<i class="bi bi-shield-check fs-1 text-success" aria-hidden="true"></i>
<i class="bi bi-star-fill fs-1 text-warning" aria-hidden="true"></i>

Три крупные иконки разных цветов — такие ставят над карточками возможностей на лендинге.

Иконки в кнопках и меню

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
 
<button type="button" class="btn btn-primary">
  <i class="bi bi-plus-lg" aria-hidden="true"></i> Новая задача
</button>
<button type="button" class="btn btn-outline-danger" aria-label="Удалить">
  <i class="bi bi-trash" aria-hidden="true"></i>
</button>

Первая кнопка — иконка плюс текст, вторая — только иконка корзины. В боковом меню админ-панели иконки ставят перед каждым пунктом: bi-speedometer2 для обзора, bi-people для пользователей, bi-gear для настроек.

Частая ошибка

Оставить кнопку с одной иконкой без текста. Программа чтения с экрана не знает, что значит корзина, и скажет просто «кнопка». Самой иконке ставьте aria-hidden="true", а кнопке — aria-label со словами: aria-label="Удалить".