Иконки

Установка

Иконки публикуются в npm, но при необходимости их также можно загрузить вручную.

npm

Установите значки Bootstrap через командную строку с помощью npm.

npm install bootstrap-icons

Загрузка

Наши релизы публикуются на GitHub. Все значки SVG включены в комплект, а также файлы лицензий и описание. Также включен package.json, хотя сценарии npm в основном доступны только для рабочих процессов разработки.

Скачать последнюю версию

Использование

Иконки являются SVG-файлами, поэтому вы можете включить их в свой HTML несколькими способами в зависимости от того, как настроен ваш проект. Значки Bootstrap по умолчанию имеют ширину width и высоту height в 1em, что позволяет легко изменять размер шрифта font-size.

Внедрение

Добавление иконки в HTML-код вашей страницы (в отличие от внешнего файла изображения). Здесь задана пользовательская ширина width и высота height.

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>

Внешнее изображение

Скопируйте SVG-иконки Bootstrap в выбранный вами каталог и назовите их как обычные изображения с помощью элемента <img>.

<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">

CSS

Вы также можете использовать SVG в своем CSS (обязательно указывайте символы, например в диапазоне от # до %23 при указании шестнадцатеричных значений цвета). Если в <svg> ширина width и высота height не указаны, значок заполнит все доступное пространство.

Атрибут viewBox необходим, если вы хотите изменить размер значков с использованием background-size. Обратите внимание, что атрибут xmlns является обязательным.

.bi::before {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

Стайлинг

Цвет можно изменить, установив класс .text-* или использовать свой CSS:

<svg class="bi bi-alert-triangle text-success" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

Работа с SVG

С SVG можно классно работать, но у них есть свои особенности. Учитывая многочисленные способы использования SVG, мы не включили эти атрибуты и обходные пути в наш код.