Глифики не отображаются только в плагине WordPress

Вопрос или проблема

У меня есть очень простой плагин для WordPress, который отображает меню/админ-страницу. Страница содержит Глифы – Font Awesome.

Эти глифы никогда не отображаются. Я не могу понять, почему, потому что я знаю, что CSS файл font-awesome загружается правильно, и я знаю, что HTML админских страниц работает нормально вне плагина WordPress и показывает глифы.

Что может быть не так?

<?php
/**
*  Название плагина: TEST Использовать FA иконки
*  URI плагина: 
*  Описание: Тестовый разрабатываемый плагин
*  Версия: 1.0.0
*  Автор: 
*  URI автора: 
*  Лицензия: GPL2
*/ 

class TEST_Use_FA_Icons_Admin
{

    public function __construct() {
        add_action('admin_menu', array($this, 'admin_menu'));
    }

    public function admin_menu() {

        wp_enqueue_style( "font-awesome", plugin_dir_url( __FILE__ ) . 'css/font-awesome.min.css', array(), false, 'all' );

        add_menu_page('TEST_DEV', 'TEST_DEV', 'administrator', 'TEST_DEV_SLUG', 
                    array($this, 'show_TEST_page'), 
                    plugins_url('images/help.png', __FILE__));
    }

    public function show_TEST_page() {
        ?>
        <div class="wrap">
            <div class="container">
                <div class="col-md-12">
                        <h1>Тест</h1>

                        <i class="fa fa-camera-retro fa-lg"></i> fa-lg
                        <i class="fa fa-camera-retro fa-2x"></i> fa-2x
                        <i class="fa fa-camera-retro fa-3x"></i> fa-3x
                        <i class="fa fa-camera-retro fa-4x"></i> fa-4x
                        <i class="fa fa-camera-retro fa-5x"></i> fa-5x
                </div>
            </div>
        </div>
        <?php
    }
}

$test_TEST_Use_FA_Icons_Admin_admin = new TEST_Use_FA_Icons_Admin();

?>

Первый вариант – использовать CDN. При его использовании иконки видны:

https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
Второй вариант – включить все необходимые ресурсы. Когда вы используете только минимальный CSS, консоль отмечает следующие ресурсы как не найденные, но необходимые:
```
GET wp-content/plugins/new/fonts/fontawesome-webfont.woff2?v=4.4.0  
GET wp-content/plugins/new/fonts/fontawesome-webfont.woff?v=4.4.0  
GET wp-content/plugins/new/fonts/fontawesome-webfont.ttf?v=4.4.0 404 (Не найдено)
```

Вот ресурсы, которые вам нужны (шрифты).

p.s. Я установил плагин и затем устранял проблемы.

У меня тоже возникла такая проблема. Затем я использовал CDN для своего плагина и включил его с помощью этой строки кода:

wp_enqueue_style( 'fontAwesome', 'https://use.fontawesome.com/releases/v5.0.13/css/all.css', array(), null);

Самая важная часть – это установить номер версии на null, так как это не сработало при автоматическом версионировании от WordPress.

Ответ или решение

Проблема с отображением значков Glyphicons (Font Awesome) в вашем плагине WordPress может возникать по нескольким причинам. Давайте рассмотрим возможные решения.

Проверьте пути к шрифтам: Если вы используете локальную версию Font Awesome, убедитесь, что все необходимые файлы шрифтов (например, .woff, .woff2, .ttf) правильно загружены на ваш сервер. Ошибка, которую вы упомянули, о том что шрифты не найдены (GET wp-content/plugins/new/fonts/fontawesome-webfont.woff2), указывает на то, что плагин не может найти файлы шрифта. Вы можете либо указать правильный путь к ним, либо включить их в ваш плагин.
Использование CDN: Если вы получили успешный результат при использовании CDN, это надежный выход. Использование следующего кода для подгрузки Font Awesome через CDN должно работать:
```
wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css', array(), null);
```
Установив версию null, вы можете избежать проблем с кэшированием, которое может возникать из-за автоматического присвоения версий WordPress.
Убедитесь, что CSS загружается последовательно: Проверьте, чтобы ваш стиль загрузился после всех других стилей, если они используют аналогичные классы (включая любой CSS, загружаемый темой или другими плагинами). Это можно сделать, указав array('some-other-handle') в параметрах при загрузке вашего стиля.

Ошибки в коде: В вашем коде есть небольшая проблема с открывающим PHP тегом в show_TEST_page(). В вашем коде указан ?>, что является HTML-сущностью для ?>. Это может привести к тому, что PHP не будет правильно исполняться. Ваш код должен выглядеть так:

public function show_TEST_page() {
   ?>
   <div class="wrap">
       <div class="container">
           <div class="col-md-12">
               <h1>Test</h1>
               <i class="fa fa-camera-retro fa-lg"></i> fa-lg
               <i class="fa fa-camera-retro fa-2x"></i> fa-2x
               <i class="fa fa-camera-retro fa-3x"></i> fa-3x
               <i class="fa fa-camera-retro fa-4x"></i> fa-4x
               <i class="fa fa-camera-retro fa-5x"></i> fa-5x
           </div>
       </div>
   </div>
   <?php
}

Кэширование: Если вы используете кэширование в вашей админ-панели, попробуйте очистить кэш, так как это может мешать отображению новых изменений.
Конфликты с другими плагинами или темами: Проверьте консоль разработчика на наличие ошибок JavaScript, которые могут вызывать конфликты с другими плагинами или вашей темой. Убедитесь, что ваши иконки не переопределяются стилями других плагинов.

Следуя этим рекомендациям, вы сможете решить проблему с отображением значков Glyphicons в вашем плагине WordPress. Если проблема все еще возникает, рассмотрите возможность использования более свежей версии Font Awesome, так как она может содержать исправления ошибок и улучшения.