Перейти к основному содержанию
Bootstrap Icons
Новое в v1.7.0: Добавлено более 120 новых иконок!

Иконки Bootstrap

Бесплатная высококачественная библиотека значков с открытым исходным кодом, содержащая более 1500 значков. Подключайте их как хотите, — SVG, через спрайты SVG или веб-шрифты. Используйте для любых проектов вместе с Bootstrap или отдельно.

npm i bootstrap-icons

Текущая версия v1.7.0 Иконки Установка Использование Стайлинг Доступность GitHub

Иконки

Установка

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

npm

Установите Иконки Bootstrap, включая SVG, спрайты значков и шрифты значков с помощью npm. Затем выберите куда вы хотите добавить значки согластно инструкциям.

npm i bootstrap-icons

Загрузка

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

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

CDN

Добавьте таблицу стилей шрифтов значков в свой веб-сайт в <head> или подключите через @import в CSS из нашей CDN. Примеры смотрите в документации.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css");

Применение

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

Внедрение

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

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>

Sprite

Используйте SVG-спрайт для вставки любого значка с помощью элемента <use>. Используйте имя файла значка в качестве идентификатора фрагмента (например, toggles - это #toggles). SVG-спрайты позволяют ссылаться на внешний файл, похожий на элемент <img>, но с использованием возможностей currentColor для удобного и простого создания тем.

Внимание! В Chrome проблема, из-за которой <use> не работает в разных доменах.

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

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

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

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

Шрифт значка

Иконочные шрифты с классами для каждой иконки также включены в Иконки Bootstrap. Включите веб-шрифты значков на свою страницу с помощью CSS и если необходимо укажите имена классов в HTML (например, <i class="bi-alarm-clock"></i>).

Используйте font-size и color для изменения внешнего вида значка.

<i class="bi-alarm"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

CSS

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

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

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></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>

Доступность

Если значки не являются чисто декоративными, убедитесь, что вы предоставили соответствующую текстовую альтернативу. В зависимости от того, какой метод вы используете для добавления значков и где вы их используете (например, как отдельные изображения, или как единственное содержимое кнопки или аналогичного элемента управления), существуют различные возможные подходы. Вот несколько примеров:

Bootstrap
<!-- alt="..." on <img> element -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>
<i class="bi-github" role="img" aria-label="GitHub"></i>
<svg class="bi" ... role="img" aria-label="Tools">
  <use xlink:href="bootstrap-icons.svg#tools"/>
</svg>
<!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
  <svg class="bi bi-volume-mute-fill" ...>
  ...
</svg>

Работа с SVG

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

К известным проблемам относятся:

  • Обработка фокуса нарушена в Internet Explorer и Edge Legacy. При встраивании ваших SVG добавьте focusable="false" к элементу <svg>. Узнайте больше о Stack Overflow.

  • Браузеры непоследовательно объявляют SVG как теги <img> с помощью голосовой поддержки. Добавьте role="img", чтобы избежать проблем. Смотрите эту статью, чтобы узнать все подробности.

  • Внешние спрайты SVG могут некорректно работать в Internet Explorer. При необходимости используйте полифил (библиотеку, добавляющую в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными) svg4everybody.

Нашли еще проблему с SVG, на которую следует обратить внимание? Пожалуйста, откройте вопрос, чтобы поделиться подробностями.