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 мають працювати.
Коментарі:
Завантаження коментарів…