Publii - підключення FontAwesome 

Зміст

Додати шрифт FontAwesome дуже просто. 

Для цього нам потрібно виконати всього два кроки - підготовчий етап і етап підключення.

Підготовчий етап

Готуємо необхідні файли

Нам знадобляться css файл all.css і самі шрифти  FontAwesome.

Безкоштовну версію Font Awesome можна завантажити за цим посиланням з офіційного сайту. В архіві, який Ви завантажили, знайдіть файл all.css, який знаходиться в папці css і папка webfonts, яка містить самі шрифти FontAwesome.

Заходите до папки assets, яка знаходиться у робочій папці Вашого сайту сайту - Publii-папка\ваш-сайт\input\themes\ваша-тема\assets

Копіюєте сюди з завантаженого архіву папку webfonts повністю. Це має виглядати наступним чином:

Publii-папка\ваш-сайт\input\themes\ваша-тема\assets\webfonts

Папка webfonts повинна містити наступні файли:

  • fa-v4compatibility.woff2
  • fa-v4compatibility.ttf
  • fa-solid-900.woff2
  • fa-solid-900.ttf
  • taste-fa-regular-400.woff2
  • fa-regular-400.ttf
  • fa-brands-400.woff2
  • fa-brands-400.ttf

Створення і підготовка папки заміщення

Для того, щоб при оновленні теми не втратити Ваші зміни та вдосконалення, потрібно папку заміщення  ваша-тема-override.

Створюємо в папці Publii-папка\ваш-сайт\input\themes нову папку  ваша-тема-override (наприклад, simple-override)

  • У папці створюємо папку partials.
  • Копіюємо оригінальний файл head.hbs до папки partials 

На цьому підготовчий етап будемо вважити виконаним.

Переходимо до підключення самих шрифтів.

Підключення шрифтів FontAwesome

Знаходимо у папці partials файл head.hbs (Publii-папка\ваш-сайт\input\themes\ваша-тема-override\partials\head.hbs)

Відкриваємо файл у текстовому редакторі і шукаємо рядок <link rel="stylesheet" href="{{css "style.css" }}">

Відразу після нього розміщуємо рядок  <link rel="stylesheet" href="{{css "all.css" }}"> 

Це має виглядати наступним чином:

<link rel="stylesheet" href="{{css "style.css" }}">
<link rel="stylesheet" href="{{css "all.css" }}">   

Зберігаємо зміни у файлі. 

На цьому етап підключення можна вважати завершеним. Шрифти FontAwesome мають працювати.

 

Коментарі:

Завантаження коментарів…

Поділитися цим:

Оновлено: 13 лютого 2025 року