Bootstrap Icons (иконки)

Иконки - это визуальные элементы, которые помогают пользователям быстро распознавать функциональность и взаимодействовать с веб-сайтом. Они улучшают пользовательский опыт, делая интерфейс более интуитивным и привлекательным.

Что такое Bootstrap Icons?

Bootstrap Icons - это библиотека значков SVG, разработанная командой Bootstrap. Она включает более 2000 иконок, которые можно использовать в ваших проектах. Эти значки были изначально взяты из собственных компонентов Bootstrap, таких как формы, карусели и многое другое.

Добавляйте их так, как вам нравится — SVGs, SVG sprite или веб-шрифтом. Используйте их с Bootstrap или без него в любом проекте.

Открыть в Figma

Иконки (значки)

Подсказка. Самый простой способ использования бутстрап иконок, это подключить их через CDN. Далее используйте следующий шаблон для добавления значков в любое место вашего проекта. <i class="bi bi-alarm-fille"></i>. Замените выделенную жирным шрифтом часть названиями значков ниже.

Часто используемые иконки

youtube

instagram

discord

facebook

clock

geo-alt

telephone

envelope-at

folder

Прочие значки

alarm-fill

alarm

align-bottom

align-center

align-end

align-middle

align-start

align-top

alt

app-indicator

app

archive-fill

Установка

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

Через менеджер пакетов

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

npm i bootstrap-icons

composer require twbs/bootstrap-icons

Скачать исходники

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

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

CDN

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

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

Как использовать bootstrap icons

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

Встроивание в HTML

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

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/></svg>

Результат:

Подключение через SVG-спрайт

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

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

Результат:

Шрифтовые иконки

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

<i class="bi-alarm"></i>

Результат:

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

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

Результат:

CSS

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

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

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

Стилизация иконок

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

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

Специальные возможности

Для чисто декоративных значков добавьте aria-hidden="true". В противном случае укажите подходящий текстовый вариант. В зависимости от того, какой метод вы используете для добавления значков и где вы их используете (например, как отдельные изображения или как единственное содержимое кнопки или аналогичного элемента управления), возможны различные подходы. Вот несколько примеров:

<!-- alt="..." on <img> element -->
<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" ...>

<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" aria-hidden="true" ...>
  ...
  </svg>
</button>

Специфика работы с SVGs

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

Известные проблемы включают:

SVG-файлы по умолчанию получают фокус в Internet Explorer и Edge Legacy. При встраивании SVG-файлов добавьте focusable="false" в элемент <svg>. Узнайте больше на Stack Overflow.
При использовании SVG с <img> элементами программы чтения с экрана могут не объявлять их изображениями или полностью пропускать изображение. Включите дополнительный role="img" на <img> элементе, чтобы избежать каких-либо проблем. Смотрите эту статью для получения подробной информации.
Внешние SVG-спрайты могут некорректно работать в Internet Explorer. При необходимости используйте полизаполнитель svg4everybody.

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

Что делать, если bootstrap иконки не отображаются?

Если иконки Bootstrap не отображаются в вашем проекте, вот несколько шагов, которые могут помочь:

Убедитесь, что вы используете последнюю версию. Например, 12 сентября 2023 года вышла версия 1.11.0 , в которую добавлено 100 новых иконок. Обновите ссылку на файл иконок в вашем HTML:
```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
```
Подключите файл иконок в вашем HTML. Для этого добавьте следующую строку:
```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
```
в раздел <head> вашей HTML-страницы.
Убедитесь, что вы используете правильные имена иконок. Например, для иконки “send” используйте <i class="bi bi-send"></i>.
Очистите кэш браузера. Иногда браузеры кэшируют старые версии файлов. Попробуйте очистить кэш и перезагрузить страницу.
Откройте консоль разработчика в браузере (обычно нажатием F12). Проверьте, есть ли какие-либо ошибки связанные с загрузкой иконок.
Убедитесь, что файл иконок доступен по указанной ссылке. Если вы используете локальный файл, убедитесь, что путь к нему указан правильно.

После выполнения этих шагов, ваши Bootstrap Icons должны отображаться корректно.

Как использовать иконки без интернета?

Вот так, вы можете использовать иконки Bootstrap без доступа к интернету

Локальное подключение:
- Скачайте файл иконок (обычно это файл с расширением .svg) с официального сайта Bootstrap Icons.
- Подключите этот файл к вашему проекту, указав правильный путь к нему в HTML-коде.
  
  Например:
```
<svg class="bi" width="16" height="16">
  <use xlink:href="path/to/your/bootstrap-icons.svg#heart-fill"/>
</svg>
```
Использование локальных спрайтов:
- Bootstrap Icons также предоставляет спрайты SVG, которые содержат все иконки в одном файле.
- Скачайте спрайт с официального сайта.
- Вставьте нужную иконку из спрайта в свой HTML-код.
Использование веб-шрифтов:
- Bootstrap Icons можно использовать как веб-шрифты.
- Скачайте файл шрифта (обычно это файл с расширением .woff или .woff2).
- Подключите его к вашему проекту через CSS.

После выполнения этих шагов, иконки будут доступны в вашем проекте даже без интернета.

FAQ (ответы на часто задаваемые вопросы)

Могу ли я использовать иконки без Bootstrap?

Да, вы можете использовать их в любом проекте, даже без Bootstrap.

Какие существуют альтернативы бутстрап иконок?

Рассмотрите Font Awesome, Feather, Octicons, Bytesize, Google Material icons, Ionicons, и другие

На этой странице