Іконки – маленька річ, але без них сайт виглядає голо: кнопка пошуку, стрілочка «нагору», значки соцмереж у підвалі. Я роками брав їх із Font Awesome, і на моїх сайтах він досі трапляється. Але за цей час змінилися і назви класів, і самі способи підключення, а копіювати старе посилання з чужої статті – найкращий спосіб отримати на сайті квадратики замість іконок. Тож розповім, як правильно додати Font Awesome на сайт і коли краще обійтися взагалі без нього.

Що таке Font Awesome

Font Awesome – це великий набір іконок, які можна вставляти на сайт як шрифт або як SVG. Є безкоштовна версія (Free) з кількома тисячами іконок у стилях solid (заповнені), частиною regular (контурні) і brands (логотипи соцмереж і компаній), та платна Pro з набагато більшим вибором. Для звичайного сайту безкоштовної зазвичай вистачає з головою.

Іконки масштабуються без втрати якості і беруть колір тексту, тож стилізуються так само просто, як звичайні літери.

Як підключити Font Awesome

Через CDN

Найшвидший спосіб – підключити файл стилів із CDN, наприклад з cdnjs. Зайди на сторінку бібліотеки на cdnjs.com, скопіюй посилання на all.min.css і встав його в <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/версія/css/all.min.css">

Номер версії стоїть просто в адресі, тому бери посилання саме зі сторінки cdnjs, а не з якоїсь статті кількарічної давності. Інакше половини свіжих іконок у тебе просто не буде.

Через Kit на сайті Font Awesome

Якщо зареєструватися на fontawesome.com, можна створити свій Kit – це один рядок <script>, який сам підтягує свіжі іконки. Зручно, але сайт тоді залежить від чужого сервера, а безкоштовний Kit має обмеження на кількість переглядів.

Локально

Цей спосіб я люблю найбільше: жодних сторонніх серверів, і все працює навіть без інтернету на локальному сайті. Звантаж архів Free for Web з офіційного сайту і скопіюй у свій проєкт дві теки – css і webfonts. Тримай їх поруч, бо стилі шукають шрифти саме за шляхом ../webfonts/. Якщо розкидати теки по різних місцях, отримаєш ті самі квадратики.

<link rel="stylesheet" href="/assets/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="/assets/fontawesome/css/solid.min.css">
<link rel="stylesheet" href="/assets/fontawesome/css/brands.min.css">

Зверни увагу: я підключаю не all.min.css, а лише базовий файл і потрібні стилі. Якщо контурні іконки тобі не потрібні, навіщо браузеру їх завантажувати? У темі WordPress ці файли правильно підключати через wp_enqueue_style() – як це робиться, я показував у статті про файл functions.php.

Через npm

Якщо проєкт збирається через npm, усе ставиться однією командою, а далі файли підключаються з node_modules або твоїм збирачем:

npm install @fortawesome/fontawesome-free

Як вставити іконку

Після підключення кожна іконка – це порожній тег із двома класами: стиль і назва.

<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-envelope"></i>
<i class="fa-brands fa-youtube"></i>

У старих статтях (і в моїх теж) ти побачиш класи на кшталт fas fa-home. Вони досі працюють для сумісності, але в нових проєктах пиши повні назви: fa-solid, fa-regular, fa-brands. Назву потрібної іконки найпростіше знайти пошуком на сайті Font Awesome – там є фільтр «Free», щоб не закохатися в іконку з платної версії 🙂

Розмір, колір і анімація

Іконка поводиться як літера, тож колір і розмір задаються звичайним CSS:

.social a {
    color: #34687d;
    font-size: 1.5rem;
}

.social a:hover {
    color: #a156b4;
}

А для швидких правок є готові класи:

  • fa-xs, fa-sm, fa-lg, fa-xl – трохи менша чи більша за текст поруч, а fa-2x … fa-10x – у кілька разів більша;
  • fa-fw – однакова ширина для всіх іконок, щоб вони рівно стояли в стовпчик у меню;
  • fa-spin – іконка обертається, ідеально для значка завантаження.

Іконки і доступність

Тут колись і я давав неточну пораду, тож виправляюся. Програми для незрячих іконку-шрифт або не озвучують, або читають якусь абракадабру. Тому правило просте:

  • Якщо іконка лише прикраса поруч із текстом – сховай її від програм читання атрибутом aria-hidden="true".
  • Якщо кнопка чи посилання складаються лише з іконки – підпис додавай не іконці, а самій кнопці.
<a href="/contacts"><i class="fa-solid fa-envelope" aria-hidden="true"></i> Написати мені</a>

<button type="button" aria-label="Пошук">
    <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
</button>

Коли краще просто SVG

Будьмо чесними: якщо на сайті три-чотири іконки, тягнути заради них сотні кілобайтів шрифтів і стилів – марнотратство. На сторінці кожної іконки на сайті Font Awesome є кнопка, яка копіює її як SVG-код. Вставляєш його просто в HTML – і жодних додаткових файлів:

<svg class="icon" viewBox="0 0 512 512" aria-hidden="true">
    <path d="…скопійований шлях іконки…"/>
</svg>
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

Завдяки 1em і currentColor така іконка теж підлаштовується під розмір і колір тексту, як шрифтова. Саме так я тепер роблю на сайтах, де іконок небагато. А ще у вбудованому SVG можна робити посилання на окремих частинах картинки – ось як зробити адаптивну карту зображень. Безкоштовні іконки Font Awesome можна використовувати де завгодно, зокрема й у комерційних проєктах, а примітка про автора вже вшита в сам SVG-код, тож не видаляй її.

Що далі

Іконки сонця й місяця гарно пасують до перемикача теми – ось як зробити темну тему на сайті. Три рисочки меню можна намалювати і без іконок, самим CSS – читай, як зробити кнопку-бургер. А якщо поруч з іконками хочеться гарного шрифту, глянь, як вибрати шрифт для сайту.

Більше про це – за позначками Front-end розробка та Шрифти.

А ти користуєшся Font Awesome чи вже перейшов/ла на SVG-іконки? Пиши в коментарях 🙂