Иконочный шрифт в Blogger : Установка и настройка Font Awesome ~ По Секрету Всему Свету

воскресенье 23 2024

Иконочный шрифт в Blogger : Установка и настройка Font Awesome

Aviator 23.6.24 Настройка блога No comments

Как правильно добавлять значки Font Awesome в logger

Использование иконок Font Awesome позволяет улучшить визуальное восприятие вашего контента, делая его более привлекательным и информативным.

Font Awesome предоставляет собой масштабируемые векторные значки, которые можно мгновенно настроить — размер, цвет, тень и все, что можно сделать изменить через CSS.

Как установить шрифт Awesome

Есть два варианта того, как можно его получить:

Способ 1. Через официальный сайт

Перейдите на официальный сайт Font Awesome, где вы можете скачать архив с библиотекой Font Awesome. Выбираем версию «FRE FOR WEB», как правило, бесплатной версии достаточно.
Затем выполните распаковку архива и скопируйте содержимое папок «/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">

Как добавить к нужному элементу иконки 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>

</button>

Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строчных элементах (тег <i> ... </i>).

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

Если понравилась статья, то оставьте, пожалуйста, комментарии!

По Секрету Всему Свету

воскресенье 23 2024