Pure Icons

Pure Icons — это расширение для плагина Advanced Custom Fields (ACF), которое добавляет удобное поле выбора иконок Font Awesome.

Ключевые возможности

• 🎯 Визуальный выбор — все иконки отображаются в наглядной сетке с мгновенным поиском.
• 🔍 Быстрый поиск — находите нужную иконку за секунды, фильтруя по имени.
• 👁️ Предпросмотр — выбранная иконка отображается в панели предпросмотра над сеткой.
• 💾 Готовый HTML — значение сохраняется как готовый тег <i>, который можно сразу выводить в шаблоне.
• ⚡ Автоматический парсинг — список иконок формируется из вашего CSS-файла Font Awesome.
• 🔄 Поддержка FA 6 и FA 7 — работает с обоими форматами CSS.
• ⌨️ Доступность — навигация клавиатурой (Tab, Enter, Space).
• 🎨 Поддержка Dark Mode — адаптируется к тёмной теме WordPress.
• 🛡️ Безопасность — строгая валидация и санитизация значений через regex и wp_kses.
• 🔌 Совместимость ACF 5 и 6 — работает с Free и Pro версиями.

Как это работает

1. При первом использовании плагин автоматически парсит ваш CSS-файл Font Awesome.
2. Извлекает все доступные иконки (solid, regular, brands).
3. Кэширует результат на неделю (WordPress Transient).
4. В редакторе отображает удобный визуальный интерфейс выбора.

Для разработчиков

Плагин предоставляет фильтры для кастомизации:

Изменить URL к CSS-файлу Font Awesome:

PHP

add_filter( 'pure_icons_fontawesome_url', function( $url ) {
    return get_template_directory_uri() . '/assets/fonts/fontawesome/css/all.min.css';
});

Изменить путь к папке Font Awesome (для парсинга):

PHP

add_filter( 'pure_icons_fontawesome_dir', function( $dir ) {
    return get_template_directory() . '/assets/fonts/fontawesome';
});

Изменить или дополнить список иконок:

PHP

add_filter( 'pure_icons_list', function( $icons ) {
    $icons[] = 'fa-custom fa-my-icon fa-fw';
    return $icons;
});

Вывод в шаблоне

PHP

$icon = get_field( 'my_icon_field' );
if ( $icon ) {
    echo '<div class="feature-icon">' . $icon . '</div>';
}

Установка

Требования:

• WordPress 5.6 или выше
• PHP 7.4 или выше
• Плагин Advanced Custom Fields (Free или Pro, версия 5+)
• Font Awesome CSS-файл, размещённый локально на сервере

Шаг 1: Загрузите Font Awesome на сервер

Плагин использует локальную копию Font Awesome (не CDN). По умолчанию файлы ожидаются по пути:

Plaintext

wp-content/uploads/font-awesome/
├── css/
│   └── all.min.css
└── webfonts/
    ├── fa-brands-400.woff2
    ├── fa-regular-400.woff2
    └── fa-solid-900.woff2

Как загрузить:

1. Скачайте Font Awesome Free с fontawesome.com.
2. Распакуйте архив.
3. Загрузите папки css/ и webfonts/ в wp-content/uploads/font-awesome/ через FTP/SFTP.

Важно: Убедитесь, что пути к шрифтам в CSS совпадают. В all.min.css по умолчанию используется ../webfonts/, поэтому структура выше должна работать без изменений.

Шаг 2: Установите ACF

Если ещё не установлен — установите Advanced Custom Fields из каталога плагинов WordPress.

Шаг 3: Установите Pure Icons

Вариант A — Загрузка через админку:

1. Скачайте ZIP-архив плагина.
2. Перейдите в Плагины → Добавить новый → Загрузить плагин.
3. Выберите ZIP-файл и нажмите Установить.
4. Активируйте плагин.

Вариант B — Через FTP:

1. Распакуйте архив.
2. Загрузите папку pure-icons в wp-content/plugins/.
3. Активируйте плагин в разделе Плагины.

Шаг 4: Создайте поле в ACF

1. Перейдите в ACF → Группы полей.
2. Создайте новую группу или откройте существующую.
3. Добавьте поле, выберите тип «Font Awesome Icon» (в категории «Выбор»).
4. Настройте параметры и сохраните.

Шаг 5: Используйте в шаблоне

PHP

$icon = get_field( 'your_icon_field_name' );
if ( $icon ) {
    echo $icon;
}

Часто задаваемые вопросы

Иконки не отображаются в админке

Убедитесь, что файл all.min.css доступен по URL вашего сайта: /wp-content/uploads/font-awesome/css/all.min.css. Проверьте консоль браузера (F12) на наличие ошибок загрузки шрифтов.

Список иконок пуст

1. Проверьте, что CSS-файл Font Awesome существует на сервере.
2. Сбросьте кэш, добавив в functions.php: delete_transient( 'pure_icons_fa_list' );. Затем перезагрузите страницу и удалите строку.

Как обновить список иконок после обновления Font Awesome?

Сбросьте transient-кэш: delete_transient( 'pure_icons_fa_list' );

Или подождите неделю — кэш обновится автоматически.

Можно ли использовать Font Awesome из CDN?

Да, но только для отображения. Парсинг иконок требует локального CSS-файла. Для изменения URL подключения используйте фильтр pure_icons_fontawesome_url.

Работает ли с ACF Repeater / Flexible Content?

Да, полностью. Все события привязаны через делегирование, что обеспечивает корректную работу в динамически добавляемых полях.