Как удалить заблокированные иконки FontAwesome из WordPress без потери функционала

Почему иконки FontAwesome могут не отображаться в WordPress

Частая проблема при использовании иконок FontAwesome в WordPress — их отсутствие на сайте или замена на пустые квадраты. Это происходит из-за блокировок внешних ресурсов, например, если FontAwesome подключается через CDN, который заблокирован по региону или на уровне сервера. Также причиной может быть конфликт плагинов или тема, которые повторно подключают разные версии FontAwesome.

Диагностика проблемы с иконками FontAwesome

Чтобы понять, что именно вызывает проблему, выполните проверку:

• Откройте консоль браузера (F12 > Console) и посмотрите ошибки загрузки CSS и JS файлов FontAwesome.
• Проверьте вкладку Network на предмет ошибок 403, 404 или задержек при загрузке шрифтов и стилей.
• Отключите все плагины, связанные с иконками, и смените тему на дефолтную (например, Twenty Twenty-Three) — если иконки появились, ищите конфликт.

Пошаговое решение: локальная загрузка FontAwesome и удаление конфликтов

Чтобы избежать блокировок и ускорить загрузку, рекомендуем локально хранить файлы FontAwesome и подключать их через functions.php. При этом важно удалить дубли иконок, чтобы не нагружать сайт.

1. Скачайте необходимые файлы FontAwesome

Перейдите на официальный сайт FontAwesome и скачайте web-fonts-with-css. Распакуйте архив и загрузите папку webfonts и CSS файл all.min.css в папку вашей темы, например, wp-content/themes/your-theme/assets/fontawesome/.

2. Подключите локальные стили и шрифты в functions.php

function wpicons_enqueue_fontawesome() {
    // Убедитесь, что отключены внешние CDN подключения FontAwesome
    wp_dequeue_style('fontawesome'); // при условии, что такой хендл есть

    // Подключаем локальный CSS
    wp_enqueue_style('wpicons-fontawesome', get_template_directory_uri() . '/assets/fontawesome/all.min.css', array(), '6.4.0');
}
add_action('wp_enqueue_scripts', 'wpicons_enqueue_fontawesome', 20);

3. Удалите автоматическое подключение FontAwesome из плагинов и темы

Если плагины или тема автоматически подключают FontAwesome через CDN, нужно их отключить. Для популярных плагинов этот параметр часто есть в настройках. Если нет — используйте фильтры или хук wp_dequeue_style в functions.php, как показано выше.

4. Очистите кеш и проверьте работу

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

Проверка результата после внедрения

• Откройте страницу с иконками, убедитесь, что они видны без ошибок.
• В консоли браузера не должно быть ошибок, связанных с FontAwesome, особенно 404 и 403.
• Проверьте вкладку Network, что CSS и шрифты грузятся с вашего домена, а не с внешних CDN.

Частые ошибки и как их исправить

• Ошибка 403/404 на файлы FontAwesome: проверьте правильность путей к файлам и права доступа на сервере.
• Дублирование иконок из-за нескольких подключений FontAwesome: используйте wp_dequeue_style для отключения лишних подключений, особенно из плагинов или темы.
• Иконки не отображаются, хотя CSS загружается: проверьте, что папка с шрифтами webfonts лежит в нужном месте относительно CSS файла.
• Проблемы с кэшированием: очищайте кеш и отключайте плагин кеширования на время отладки.

Практические советы по безопасности и производительности

• Локальная загрузка FontAwesome снижает риски блокировки и повышает скорость загрузки, так как файлы загружаются с вашего сервера.
• Обновляйте FontAwesome только из официальных источников, чтобы избежать уязвимостей.
• Минимизируйте количество подключаемых иконок, используйте кастомные наборы, чтобы не грузить весь набор шрифтов.
• Используйте preload для шрифтов, чтобы ускорить отображение иконок:

<link rel="preload" href="/wp-content/themes/your-theme/assets/fontawesome/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Таблица сравнения способов подключения FontAwesome