Логотип Хекслета

Bootstrap 5: Основы верстки

Теория: Bootstrap Icons

При создании страницы важно дать пользователю возможность быстро анализировать ее. Это позволяет отделять части сайта друг от друга и акцентировать внимание на определенных участках страницы или блока.

Для решения этой задачи используются разные способы:

  • Шрифтовой акцент
  • Акцент цветом
  • Тени и границы
  • Графический акцент

Шрифты, цвет, границы и тени в Bootstrap можно сделать с помощью утилит. Один из способов создания графического акцента — использование иконок. Раньше для иконок использовались сторонние решения, такие как шрифты или паки иконок. Теперь можно использовать библиотеку Bootstrap Icons, которая предоставляет больше 1500 иконок.

Стиль Bootstrap Icons отлично сочетается с компонентами Bootstrap, значит, не придется подбирать десятки разных иконок, чтобы найти нужную.

В этом уроке мы научимся подключать и использовать иконки от разработчиков бутстрап в своем проекте.

Подключение Bootstrap Icons

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

Чтобы подключить шрифт, используйте официальную ссылку со страницы Bootstrap Icon. В конце урока будет приложена ссылка. В середине 2023 года свежая версия иконок: 1.10.5. Подключим ее на странице с помощью тега <link>:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Подключаем Bootstrap -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">

  <!-- Подключаем иконки Bootstrap Icons -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

  <title>Подключение иконок Bootstrap</title>
</head>
<body>

</body>
</html>

В коде выше мы создаем базовую структуру документа и подключаем основные файлы:

  • bootstrap.min.css — основной файл библиотеки Bootstrap со всеми компонентами и утилитами
  • bootstrap-icons.css — файл стилей для иконок. Внутри этого файла подключаются шрифты и стили для иконок

Иконки необязательно использовать только внутри проектов Bootstrap. Можно подключить файл в любой готовый проект.

Использование иконок на странице

Для добавления иконок используется пустой элемент с двумя классами:

  • bi — структурный класс Bootstrap Icon
  • bi-название — какую иконку отобразить в теге

Разберем добавление на примере иконки Truck Front:

Иконка Truck Front

У иконки Truck Front используется два класса: bi и bi-truck-front. Часто в качестве тега для иконки используется парный тег <i></i>. Воспользуемся им и добавим иконку на страницу:

<i class="bi bi-truck-front"></i>

Иконка Truck Front

Мы увеличили масштаб, чтобы иконку было лучше видно. Изначально все иконки добавляются в размере 16x16 пикселей. Изменить размер иконки можно с помощью классов для текста fs и display.

Иконки удобно использовать внутри компонентов. Добавим внутрь компонента кнопки иконку:

<button type="button" class="btn btn-primary">
  <i class="bi bi-alarm"></i>
  Напомнить
</button>

Codepen

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

<form>
  <div class="mb-3">
    <label for="name" class="form-label">Имя</label>
    <div class="input-group">
      <span class="input-group-text"><i class="bi bi-person"></i></span>
      <input type="text" class="form-control" id="name" placeholder="Введите ваше имя">
    </div>
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <div class="input-group">
      <span class="input-group-text"><i class="bi bi-envelope"></i></span>
      <input type="email" class="form-control" id="email" placeholder="Введите ваш email">
    </div>
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Пароль</label>
    <div class="input-group">
      <span class="input-group-text"><i class="bi bi-lock"></i></span>
      <input type="password" class="form-control" id="password" placeholder="Введите ваш пароль">
    </div>
  </div>
  <button type="submit" class="btn btn-primary"><i class="bi bi-person-plus"></i> Зарегистрироваться</button>
</form>

Codepen

Выводы

Для использования иконок внутри макетов Bootstrap используется библиотека Bootstrap Icons. В отличие от других библиотек иконок Bootstrap Icons хорошо сочетаются с компонентами фреймворка. Это позволяет быстро добавлять иконки на странице и не беспокоиться о визуальном сочетании.

Для большинства проектов будет достаточно добавить иконки с помощью тега <link>. В этом случае можно использовать иконки с помощью двух классов:

  • bi — структурный класс Bootstrap Icon
  • bi-название — какую иконку отобразить в теге

Иконки можно встраивать в любые части компонентов Bootstrap. Это разнообразит макет и позволит сконцентрировать пользователя на нужных участках страницы.

Библиотека Bootstrap Icons дает более 1500 различных иконок. В документации есть страница каждой иконки, где находятся примеры использования и классы, которые нужны для добавления на страницу.

Навигация
Теория
Тесты