Как правильно добавлять значки Font Awesome в Blogger
Font Awesome предоставляет собой масштабируемые
векторные значки, которые можно мгновенно настроить — размер, цвет, тень и все,
что можно изменить через CSS.
Если вы хотите разнообразить внешний вид своего Blogspot блога, то
использование в нем нестандартных шрифтов – достаточно неплохая идея.
Как установить шрифт 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>
Вы можете
разместить иконки Font Awesome в любом месте, используя в имени
класса префикс fa и название иконки. Font Awesome разработан так,
чтобы он мог быть использован в строчных элементах
(тег <i> ... </i>).