Как правильно добавлять значки Font Awesome в logger
Font Awesome предоставляет собой масштабируемые векторные значки, которые можно мгновенно настроить — размер, цвет, тень и все, что можно сделать изменить через CSS.
Как установить шрифт Awesome
Есть два варианта того, как можно его получить:
Затем выполните распаковку архива и скопируйте содержимое папок «/css» и «/webfonts» в свою веб-директорию, (т.е. где находятся папки вашего сайта).
Например, в папку /css/awesome).
После этого добавьте следующую строку в тег <head> вашего сайта, чтобы подключить стили Awesome:<link rel="stylesheet" href="/css/awesome/css/all.css" />
- Способ 1. Через официальный сайт
Затем выполните распаковку архива и скопируйте содержимое папок «/css» и «/webfonts» в свою веб-директорию, (т.е. где находятся папки вашего сайта).
Например, в папку /css/awesome).
После этого добавьте следующую строку в тег <head> вашего сайта, чтобы подключить стили Awesome:<link rel="stylesheet" href="/css/awesome/css/all.css" />
- Способ 2. CDN Font Awesome
Подключите Font Awesome с помощью CDN (Content Delivery Network). Это самый простой способ, и он не требует загрузки и установки файлов на вашем сервере. Для этого просто вставьте следующий код в ваш HTML-файл:
Важно! URL может меняться в зависимости от выбранной вами версии Font Awesome. Наш код подходит для версии 6.4.4.
<link rel="stylesheet" href=" https://use.fontawesome.com/releases/v6.4.4/css/all.css">
<link rel="stylesheet" href=" https://use.fontawesome.com/releases/v6.4.4/css/all.css">
Как добавить к нужному элементу иконки Font Awesome
Вам нужно выбрать нужную иконку на сайте Font Awesome и скопировать ее HTML код:
<i class="fa fa-car" </i> и вставить его перед тем
элементом, который хотите выделить
Добавление стилей CSS к иконке
< i class="fa fa-car"style="color: red; font-size: 28px;"</i>
Машины
Пример использование иконок для меню сайта:
<button style='font-size:14px'><a href="#">Главная
<i class='fa fa-home'style='font-size:18px;color:#0ac4fc'></i></a>
<i class='fa fa-home'style='font-size:18px;color:#0ac4fc'></i></a>
</button>
Вы можете
разместить иконки Font Awesome в любом месте, используя в имени класса
префикс fa и название иконки. Font Awesome разработан так, чтобы он мог
быть использован в строчных элементах (тег <i> ... </i>).
Комментариев нет:
Отправить комментарий
Если понравилась статья, то оставьте, пожалуйста, комментарии!