Font Awesome – це онлайн-сервіс, створений Дейвом Ганді, який дозволяє з допомогою CSS використовувати на своєму сайті спеціальні Awesome шрифти – колекція іконок у форматі svg. Існує два способи підключити їх на сайт: віддалено – вказавши шлях до css файлу (розташованому на сервері Font Awesome) в шапці вашого сайту або локально – завантажити безкоштовно бібліотеку, помістити в директорію сайту і підключити її на сайті. Недолік першого варіанту у тому, що підключення зайвих стилів створює зайві з’єднання зі сторонніми серверами й тим самим гальмує завантаження веб-сторінки. Тому більш ефективним є другий спосіб – використовувати бібліотеку шрифтів Font Awesome локально. І у цій статті я розповім як правильно це зробити.
Підключення Font Awesome на сайті
1. Заходимо на офіційний веб-сайт Font Awesome й реєструємося, натискаємо “Start for Free”:
2. Переходимо на сторінку Hosting Font Awesome Yourself, де міститься технічний опис й інструкція. Натискаємо “Download Font Awesome Free for the Web” й скачуємо архів:
3. По FTP протоколу чи SSH завантажуємо архів у кореневу (або будь-яку іншу) директорію сайту. Розпаковуємо архів, переходимо в редагування шаблону сайта і перед тегом </header> додаємо код під’єднання CSS-файлу шрифтів:
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
Готово. Тепер Font Awesome буде під’єднуватися на сайті локально.
Як використовувати Font Awesome?
Переходимо в галерею Font Awesome й обираємо будь-який значок з допомогою пошукового запиту:
Далі клацаємо по обраній іконці і переходимо на сторінку детального перегляду, де натискаємо “Start Using This Icon”:
Копіюємо код кнопки:
Відкриваємо шаблон сайту і ставимо скопійований код у тому місці, де повинна відобразитися іконка:
Зберігаємо зміни. Перезавантажуємо веб-сторінку без кешу (CTRL+F5) і перевіряємо. Якщо все зробили правильно – іконка Font Awesome повинна з’явитися. Наприклад, я використав значок ока для статистики переглядів:
Лайфхак: як в меню замість напису “Головна” використати іконку
Текст пункту меню “Головна” часто є зайвим і замість нього можна поставити стильну іконку. Для початку напис “Головна” потрібно видалити або приховати (дехто замість тексту ставить код пробілу “ “.
Тепер переходимо в код шаблону і застосовуємо CSS-псевдоелемент before – він виведе іконку перед написом “Головна”. А оскільки його немає, відобразиться лише іконка:
Ось готовий код:
li.item1 span:before {
font-family: 'Font Awesome 5 Free';
content: "\f015";
font-weight: 900;
font-size: 16px;
}
Результат:
Які іще переваги дає Font Awesome?
- Іконки дуже стильні, мало важать й постійно оновлюються, ідеально впишуться в дизайн будь-якого сайту
- Font Awesome побудований на основі svg, що дозволяє змінювати розміри значків без втрати якості
- Не впливає на швидкість завантаження сторінок (якщо використовувати локально)
- Кросплатформність – усі браузери коректно відображають Font Awesome
- Безкоштовність. Хоча існує й окрема комерційна PRO версія.
