Сайт без иконок выглядит как текстовая простыня из 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» в настройках плагина. Проблема почти всегда решается одной кнопкой.