Иконки

Установка

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

npm

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

npm install bootstrap-icons

Загрузка

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

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

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

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

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

CSS

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

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

.bi::before {
  display: inline-block;
  content: "";
  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>

Работа с SVG

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

Нашли проблему с SVG, на которую стоит обратить внимание? Пожалуйста, напишите…