Как добавить иконки в Bootstrap 4

Как добавить иконки в Bootstrap 4

Новая версия Bootstrap 4 по умолчанию не включает в себя иконки, в отличие от предыдущей версии Bootstrap 3, в которой ядро содержит иконки в формате шрифта (font icons).

Тем не менее, вы все равно можете включать значки в свой проект, используя несколько внешних шрифтов на основе библиотеки иконок. Самая популярная и очень совместимая библиотека иконок для Bootstrap - Font Awesome. Она обеспечивает более 1000 иконок (количество постоянно растет), которые доступны в формате шрифта для лучшего удобства использования и масштабируемости.

Преимущество использования шрифтов иконок заключается в том, что вы можете создавать иконки любого цвета, просто применяя свойство color в CSS. Давайте посмотрим, как добавить шрифт-иконки на веб-страницу.

Как подключить иконки Font Awesome

Вы можете просто использовать доступную ссылку на шрифт с CDN, чтобы включить иконочный шрифт в свой проект. Эта ссылка CDN в основном указывает на удаленный файл CSS, который включает в себя все необходимые классы и файлы шрифтов для создания различных иконок. Давайте посмотрим на следующий пример:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

Добавление этого тэга в секцию <head> вашей HTML страницы, сделает доступными для использования все иконки Font Awesome.

Как использовать Font Awesome в шаблоне Bootstrap

Для использования иконок шрифта в вашем коде вам потребуется тег <i> вместе с базовым классом .fas и отдельным классом значков .fa- *. Общий синтаксис использования значков шрифтов:

<i class="fas fa-class-name"></i>

Где class-name это название иконки из набора, который можно найти на официальном сайте https://fontawesome.com/icons?d=gallery&m=free.

Иконки можно добавлять в такие элементы как ссылки, кнопки, списки и т.д.

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*