При создании страницы важно дать пользователю возможность быстро анализировать ее. Это позволяет отделять части сайта друг от друга и акцентировать внимание на определенных участках страницы или блока.
Для решения этой задачи используются разные способы:
- Шрифтовой акцент
- Акцент цветом
- Тени и границы
- Графический акцент
Шрифты, цвет, границы и тени в 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 Iconbi-название— какую иконку отобразить в теге
Разберем добавление на примере иконки Truck Front:
У иконки Truck Front используется два класса: bi и bi-truck-front. Часто в качестве тега для иконки используется парный тег <i></i>. Воспользуемся им и добавим иконку на страницу:
<i class="bi bi-truck-front"></i>
Мы увеличили масштаб, чтобы иконку было лучше видно. Изначально все иконки добавляются в размере 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 Iconbi-название— какую иконку отобразить в теге
Иконки можно встраивать в любые части компонентов Bootstrap. Это разнообразит макет и позволит сконцентрировать пользователя на нужных участках страницы.
Библиотека Bootstrap Icons дает более 1500 различных иконок. В документации есть страница каждой иконки, где находятся примеры использования и классы, которые нужны для добавления на страницу.
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
