Новая версия 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.
Иконки можно добавлять в такие элементы как ссылки, кнопки, списки и т.д.
Оставить комментарий