Сайт без іконок виглядає як текстова простирадло з 2005 року. Але малювати іконки у Photoshop і возитися зі спрайтами — це ще те задоволення, особливо якщо ви не дизайнер.

Font Awesome вирішує цю проблему з 2012 року: це безплатна бібліотека з 2000+ векторних іконок, які поводяться як звичайний текст. Змінюєте колір у CSS, іконка перефарбовується. Збільшуєте шрифт, вона масштабується без пікселів і розмиття.

На практиці безплатної версії вистачає для меню, кнопок і соцмереж. А якщо потрібні дуотони та 30 000+ іконок, є Pro від $60 на рік. Нижче, три способи додати Font Awesome у WordPress: від найпростішого до ручного встановлення для тих, хто не боїться functions.php.

💡 Швидкий огляд:

• Встановіть офіційний плагін Font Awesome з каталогу WordPress — це займе хвилину і не потребує редагування коду
• Для ручного контролю підключіть Font Awesome через CDN або Kit у functions.php дочірньої теми
• Якщо користуєтеся Elementor, іконки вже вбудовані, окремий плагін не потрібен
• Після підключення змінюйте розмір, колір та анімацію іконок через CSS або готові класи

Що таке Font Awesome

Font Awesome — це іконковий шрифт: замість літер у ньому символи-іконки. Браузер рендерить їх як векторну графіку, тому на будь-якому екрані та за будь-якого масштабу краї залишаються чіткими. Жодних PNG, спрайтів і srcset.

Бібліотека поділяється на дві частини. Безплатна містить п'ять стилів: Solid, Regular, Brands, Duotone і Sharp. Pro додає Thin, Light і десятки тисяч іконок, плюс завантаження власних SVG через Kit. Для типового сайту-візитки чи блогу Free закриває переважну більшість задач: стрілки, соцмережі, пошук, кошик, чекбокси.

Головна перевага перед растровими іконками, повна керованість через CSS. Колір, розмір, тінь, поворот, анімація, все задається класами без жодного редагування графіки.

Спосіб 1: офіційний плагін (рекомендований)

Найбезпечніший шлях, поставити офіційний плагін Font Awesome на WordPress.org. Його випускає та сама команда, що створює саму бібліотеку. Плагін оновлюється синхронно з виходом нових версій іконок і не залежить від вашої теми.

Як встановити:

Перейдіть у Plugins → Add New. У рядку пошуку введіть «font awesome» і натисніть Enter.

Натисніть Install Now, а потім Activate.

Готово. Після активації в меню Settings з'явиться пункт Font Awesome, там можна перемкнути джерело іконок (CDN або Kit), увімкнути сумісність із четвертою версією та запустити сканер конфліктів.

Плагін додає в блочний редактор окремий блок «Font Awesome Icon». Натискаєте на нього, відкривається пошук по всій бібліотеці. Вибираєте іконку, тиснете «Insert», і вона з'являється в тексті як SVG. Стилізація, прямо в бічній панелі блоку: розмір, колір, поворот.

Для класичного редактора працює шорткод:

1
[icon name="download" prefix="fa-solid"]

Або чистий HTML:

1
<i class="fa-solid fa-download"></i>

Якщо у вас Pro-акаунт, створіть Kit на fontawesome.com, скопіюйте API Token і вставте в налаштування плагіна. Після цього Icon Chooser показуватиме й Pro-іконки.

Спосіб 2: ручне встановлення через functions.php

Спосіб для тих, хто хоче контролювати кожне завантаження на сайт або не встановлює зайвих плагінів. Працює через дочірню тему, щоб оновлення основної теми не стерло ваші правки.

Створіть дочірню тему

У папці wp-content/themes/ створіть директорію із суфіксом -child (наприклад, astra-child). Всередині, два файли.

style.css:

1
/*
2
Theme Name: Astra Child
3
Template: astra
4
*/

functions.php:

1
<?php
2
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
3
function enqueue_parent_styles() {
4
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
5
}

Перейдіть у Appearance → Themes і активуйте дочірню тему.

Підключіть Font Awesome через CDN

Додайте в functions.php дочірньої теми код:

1
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
2
function enqueue_font_awesome() {
3
    wp_enqueue_style(
4
        'font-awesome',
5
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
6
        array(),
7
        '6.7.2'
8
    );
9
}

Цей хук тягне безплатну версію з CDN cdnjs, найнадійнішого публічного CDN для FA 6. Цифра 6.7.2, версія на червень 2026; перевірте актуальну на сторінці пакета cdnjs і підставте свіжу.

Альтернатива: Kit від Font Awesome

Kit дає доступ до Pro-іконок і автоматично підвантажує лише ті стилі, які використовуються на сторінці, менше зайвих кілобайт.

Зареєструйтеся на сайті Font Awesome, створіть Kit, скопіюйте код впровадження і вставте в header.php дочірньої теми перед </head>:

1
<script src="https://kit.fontawesome.com/ВАШ_КОД.js" crossorigin="anonymous"></script>

Мінус Kit у тому, що безплатний тариф обмежений 10 000 показів сторінок на місяць. Для сайту з більшим трафіком, або CDN, або Pro.

Вбудований редактор теми (Appearance → Theme File Editor) дає змогу правити functions.php прямо з адмінки. Але безпечніше працювати через FTP або файловий менеджер хостингу: друкарська помилка в PHP-коді ламає сайт, а без доступу до файлів відновити його буде нічим.

Спосіб 3: через Elementor або інший конструктор

Якщо ви вже використовуєте Elementor, окремий плагін Font Awesome не потрібен, конструктор містить бібліотеку з коробки.

У будь-якому віджеті з іконкою (Icon, Icon Box, Icon List) натискаєте на іконку → відкривається бібліотека з пошуком за всіма стилями Free. Колір, розмір, тінь та ховер-ефекти налаштовуються на бічній панелі без жодного рядка CSS.

Те саме стосується SeedProd, Beaver Builder та Divi. Перевірте налаштування свого конструктора: майже всі популярні візуальні білдери для WordPress уже містять Font Awesome у ядрі.

Як змінити стиль іконок

Після підключення Font Awesome ви керуєте іконками винятково через класи та CSS. Прямі правки SVG-файлів не потрібні.

Розмір

Розмір іконки задається готовими класами. Один клас робить іконку більшою на третину, інший, удвічі, третій, утричі, і так до десятикратного збільшення. Точні значення всіх класів дивіться на сайті Font Awesome.

Приклад іконки, збільшеної втричі:

Приклад іконки, збільшеної втричі:

1
<i class="fa-solid fa-download fa-3x"></i>

Поворот і віддзеркалення

• fa-rotate-90, поворот на 90°
• fa-rotate-180, на 180°
• fa-rotate-270, на 270°
• fa-flip-horizontal, дзеркально по горизонталі
• fa-flip-vertical, дзеркально по вертикалі

Анімація

Два варіанти, обидва через класи:

• fa-spin, рівномірне обертання (підходить для спінерів завантаження)
• fa-pulse, обертання у вісім кроків (переривчаста пульсація)

1
<i class="fa-solid fa-spinner fa-spin"></i>

Колір

Колір іконки успадковується від батьківського тексту. Щоб задати свій, правило CSS:

1
.fa-download {
2
    color: #27ae60;
3
}

Додати такий CSS найпростіше через Appearance → Customize → Additional CSS. Зміни застосовуються одразу й видимі в реальному часі.

Іконка через псевдоелемент

Коли іконка має висіти на елементі без зайвої розмітки, використовуйте ::before або ::after у CSS:

1
.external-link::after {
2
    content: "\f08e";
3
    font-family: "Font Awesome 6 Free";
4
    font-weight: 900;
5
    margin-left: 6px;
6
}

Код \f08e — це Unicode-ідентифікатор іконки. Знайти його можна на сторінці конкретної іконки на fontawesome.com, там він указаний під назвою.

Де брати іконки

Відкрийте fontawesome.com/icons, введіть ключове слово в пошук і виберіть стиль. На сторінці іконки, HTML-сніпет, Unicode і список доступних стилів. Копіюєте та вставляєте в потрібне місце.

Трохи про відеоінструкцію

Якщо зручніше дивитися, а не читати, ось туторіал із додавання іконок Font Awesome у меню WordPress:

Після перегляду повертайтеся до тексту, нижче розібрано тонкощі, яких у відео немає.

⁉️🤔 Часті запитання

Чи потрібно платити за Font Awesome?

Безкоштовна версія закриває потреби переважної більшості сайтів: 2000+ іконок у п’яти стилях, включно з брендовими (Facebook, Twitter, Instagram та сотні інших). Pro коштує від $60 на рік і додає Thin, Light, Sharp-сімейства, Duotone в усі стилі та завантаження власних SVG. Платити має сенс, якщо ви продаєте іконки як частину продукту або вам принципово потрібні дуотони. Плагін Font Awesome на WordPress.org повністю безкоштовний, Pro-іконки підключаються через API Token у налаштуваннях того самого плагіна, купувати чи встановлювати щось окремо не потрібно.

Який спосіб підключення обрати?

Для новачків і типових сайтів, офіційний плагін. Він встановлюється у два кліки, має вбудований пошук іконок у редакторі та сканер конфліктів. Ручне встановлення через CDN виправдане, якщо ви мінімізуєте плагіни на сайті й точно знаєте, в який файл додати wp_enqueue_style. Kit від Font Awesome, компроміс: простота підключення без плагіна, але безкоштовний ліміт у 10 000 показів.

Що робити, якщо іконки не відображаються?

Першим ділом запустіть Conflict Detection Scanner у налаштуваннях плагіна Font Awesome. Найчастіше проблема в тому, що тема або інший плагін підвантажують свою версію Font Awesome, виникає конфлікт версій. Сканер знайде джерело конфлікту, а плагін запропонує заблокувати його. Другий частий випадок, помилка в синтаксисі: перевірте, що використовуєте префікс fa-solid, а не fa (це синтаксис старої четвертої версії).

Чи можна використовувати Font Awesome без WordPress?

Так, Font Awesome не прив’язаний до WordPress. Підключіть CDN-посилання в <head> будь-якого HTML-документа і вставляйте іконки тегом <i class="fa-solid fa-имя"></i>. Працює з React, Vue, Laravel, чистим HTML і навіть у PDF-генераторах. На fontawesome.com/docs є інструкції для десятка платформ.

Чим Font Awesome кращий за інші іконкові бібліотеки?

Два головні аргументи: розмір спільноти та сумісність. Font Awesome використовують мільйони сайтів, тому документація перекладена десятком мов, а відповіді на будь-які проблеми гугляться за секунди. Друге, офіційний WordPress-плагін з авторозв’язанням конфліктів: ні Material Icons, ні Bootstrap Icons такого не дають.

Чи варто заморочуватися: що обрати під вашу задачу

Якщо ви дочитали до цього місця, таблиця нижче зекономить вам час:

Перевірте, що після підключення іконки коректно відображаються в різних браузерах і на мобільних пристроях. Якщо помітили мерехтіння або підміну іконок, запустіть сканер конфліктів із пункту «Troubleshoot» у налаштуваннях плагіна. Проблема майже завжди вирішується однією кнопкою.