Glyphicons Dont Show in WordPress Plugin Only

Question

Glyphicons Dont Show in WordPress Plugin Only

sazr

2022年5月12日 17:01

I have a very simple WordPress plugin that shows a menu/admin page. The page contains Glyphicons - Font Awesome.

These glyphicons are never showing. I cannot figure out why because I know the font-awesome css file is being loaded correctly and I know that the admin pages HTML works fine outside of a wordpress plugin and shows the Glyphs.

What could possibly be going wrong?

?php
/**
*  Plugin Name: TEST Use FA Icons
*  Plugin URI: 
*  Description: Test Development Plugin
*  Version: 1.0.0
*  Author: 
*  Author URI: 
*  License: 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"
                        h1Test/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();

?

Topic twitter-bootstrap plugin-development Wordpress

Category Web

Patrick Münster · Accepted Answer · 2018年5月11日 19:14

I've got the issue too. Then I've used the CDN for my plugin and included it with this line of code:

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

Most important part was to set the version number to null cause it didn't work by auto versioning from wordpress.

denis.stoyanov · Accepted Answer · 2015年8月14日 13:17

1st alternative is to use the CDN. When using it the icons are visible:

https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

2nd alternative is to include all resources necessary. When you are using only the min CSS, the console is marking the following resources as not found but required :

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 (Not Found)

Here are the resources that you need (the fonts).

p.s. I've installed the plugin and then troubleshoot it.

Glyphicons Dont Show in WordPress Plugin Only

About