Как подключить в Blogger шрифт Font Awesome: Как подключить иконки Font Awesome в Blogpost

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

Если вы хотите разнообразить внешний вид своего Blogspot блога, то использование в нем нестандартных шрифтов, таких как Font Awesome – достаточно неплохая идея.

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

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

Показать статью

Инструкция по подключению иконочного шрифта в Blogger:

1. Подключение через уникальный код Kit (скрипт для подключения библиотеки иконок FontAwesome)
   
   
   1. Зарегистрируйтесь или войдите на сайт FontAwesome
   2. Создайте новый Kit в личном кабинете.
   3. Скопируйте предоставленный код, например:

      <script src="https://kit.fontawesome.com/ВАШ_УНИКАЛЬНЫЙ_КОД.js" crossorigin="anonymous"></script>

   4. Перейдите в Blogger → Тема → Редактировать HTML.
   5. Вставьте код в секцию <head> вашего шаблона.
   6. Сохраните изменения.
      
      
2. Подключение через CDN
   1. Скопируйте CDN-ссылку, например:

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

   2. В Blogger → Тема → Редактировать HTML.
   3. Вставьте ссылку внутри <head>.
   4. Сохраните изменения.
      
      
3.  Локальное подключение 
   1. Скачайте архив с официального сайта (Шрифт Awesome) — Download Free for Web.
      
      
      
      ×
   2. Распакуйте и загрузите файлы CSS стилей и файлы шрифтов на свой хостинг с доступом через интернет — содержимое папок «/css» и «/webfonts» в локальную папку. 
   3. Подключите CSS стили из локальной папки по ссылке:
      

      <link rel="stylesheet" href="https://ваш_хостинг.com/fontawesome/css/all.css" />

   4. Вставьте ссылку в <head> шаблона Blogger
   5. Сохраните изменения и убедитесь, что путь к шрифтам в CSS указан правильно.
      
      
4. Как использовать иконки

   После подключения вставляйте иконки так (инструкция):

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

   Как добавить к нужному элементу иконки 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 — это набор инструментов для создания шрифтов и иконок, основанный на CSS и JavaScript. По состоянию на 2024 год Font Awesome использовался на 25,4% сайтов, что ставит Font Awesome на второе место после Google Fonts.