Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

3 <ul><li>Шрифтовой акцент</li>

4 <li>Акцент цветом</li>

5 <li>Тени и границы</li>

6 <li>Графический акцент</li>

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

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

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

10 <h2>Подключение Bootstrap Icons</h2>

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

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

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

14 <ul><li>bootstrap.min.css - основной файл библиотеки Bootstrap со всеми компонентами и утилитами</li>

15 <li>bootstrap-icons.css - файл стилей для иконок. Внутри этого файла подключаются шрифты и стили для иконок</li>

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

17 <h2>Использование иконок на странице</h2>

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

19 <ul><li>bi - структурный класс Bootstrap Icon</li>

20 <li>bi-название - какую иконку отобразить в теге</li>

21 </ul>Разберем добавление на примере иконки<a>Truck Front</a>:

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

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

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

25 <a>Codepen</a>

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

27 <a>Codepen</a>

28 <h2>Выводы</h2>

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

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

31 <ul><li>bi - структурный класс Bootstrap Icon</li>

32 <li>bi-название - какую иконку отобразить в теге</li>

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

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