Перейти к основному содержанию
Иконки Bootstrap
Новое в v1.4.0: 60+ иконок погоды!

Иконки Bootstrap

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

npm i bootstrap-icons

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

Иконки

Установка

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

npm

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

npm i bootstrap-icons

Скачать

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

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css");

CDN

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

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

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

Иконки Bootstrap - это 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"/></svg>

Спрайт

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

<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 Icons в выбранный Вами каталог и укажите на них ссылки, как на обычные изображения, с помощью элемента <img>.

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

Шрифт иконки

Иконочные шрифты с классами для каждой иконки также включены в Bootstrap Icons. Включите веб-шрифты иконок на свою страницу с помощью 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 при указании шестнадцатеричных значений цвета). Когда никакие размеры не указаны через width и height в <svg>, иконка заполнит доступное пространство.

Атрибут 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="..." на элементе <img> -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>
<!-- role="img" and aria-label="..." -->
<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="..." на контроле -->
<button ... aria-label="Mute">
  <svg class="bi bi-volume-mute-fill" ...>
  ...
</svg>

Работа с SVG

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

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

  • SVG получают фокус по умолчанию в Internet Explorer и Edge Legacy. При встраивании SVG добавьте focusable="false" в элемент <svg>. Подробнее на Stack Overflow.

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

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

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