How to remove dashicons.min.css from frontend?

Question

Is there any way to remove the dashicons.min.css file from the frontend? I know that they are used by the admin panel, but my theme doesn't use them so it's an unnecessary request.

Answer 1

Try deregistering that stylesheet -

add_action( 'wp_print_styles',     'my_deregister_styles', 100 );

function my_deregister_styles()    { 
   //wp_deregister_style( 'amethyst-dashicons-style' ); 
   wp_deregister_style( 'dashicons' ); 


}

Answer 2

If you want to load dashicons only to admin user, try to put this into functions.php file:

// remove dashicons in frontend to non-admin 
    function wpdocs_dequeue_dashicon() {
        if (current_user_can( 'update_core' )) {
            return;
        }
        wp_deregister_style('dashicons');
    }
    add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );

Answer 3

Here's my solution to this issue. It's similar to the ones proposed by WisdmLabs and JoseLazo above but it performs a better conditional check. The dashicons style is loaded for all logged-in users belonging to any role (and not just admins) as dashicons style is needed to properly display the frontend admin bar.

// Remove dashicons in frontend for unauthenticated users
add_action( 'wp_enqueue_scripts', 'bs_dequeue_dashicons' );
function bs_dequeue_dashicons() {
    if ( ! is_user_logged_in() ) {
        wp_deregister_style( 'dashicons' );
    }
}

Answer 4

use wp_dequeue_style. http://codex.wordpress.org/Function_Reference/wp_dequeue_style

it may be that some other style sheet is listing dashicons as a dependency, so if dequeueing doesn't work, check for that.

Answer 5

If you want to deregister css styles from your child theme's functions.php, I would suggest navigating the parent theme and search for the wp_enqueue_style() method applied for the style sheet you want to remove.

For e.g if you want to remove app.css in your child theme,

search for app.css in your parent theme and find the code that enqueues this style.

You may find something like

wp_enqueue_style('parent_theme_style', get_template_directory_uri() . '/assets/css/app.css', false, '2.2');

Now, in your functions.php for your child theme, add the following snippet :

add_action( 'wp_print_styles', 'my_deregister_styles', 200 );

function my_deregister_styles() { 
    wp_deregister_style('parent_theme_style');
    }

The catch is that wp_derigster_stlye('app') won't work here.

This is a small issue that some people might miss and hence posting it here.

Answer 6

I found I had to both dequeue and deregister for it to work. As mentioned previously the admin requires dashicons so you only want to remove them if the user isn't logged in.

add_action( 'wp_print_styles', 'zgwd_dequeue_styles' );
function zgwd_dequeue_styles() { 
    if ( ! is_user_logged_in() ) {
        wp_dequeue_style( 'dashicons' );
        wp_deregister_style( 'dashicons' );
    }
}

Answer 7

A solution would be possible by combining

    // Remove dashicons in frontend for unauthenticated users
add_action( 'wp_enqueue_scripts', 'bs_dequeue_dashicons' );
function bs_dequeue_dashicons() {
    if ( ! is_user_logged_in() ) {
        wp_deregister_style( 'dashicons' );
    }
}

and the method, he uses to replace Dashicon set with Font Awesome in Documentation

function megamenu_use_fontawesome_arrows( $vars, $location, $theme, $menu_id, $theme_id ) {
    $vars['arrow_font'] = "'Font Awesome 5 Free'";
    $vars['arrow_font_weight'] = "900";
    $vars['arrow_up'] = "'\\f106'";
    $vars['arrow_down'] = "'\\f107'";
    $vars['arrow_left'] = "'\\f104'";
    $vars['arrow_right'] = "'\\f105'";
    return $vars;
}

Answer 8

Not sure how the client is going to end up loading dashicons.min.css as a resource in the front end. I know that you clarified that the file is not enqueued by default and that a theme or a plugin enqueues it.

I second the answer above by @marcochiesi, however, if you are looking for this answer after running lighthouse chrome audit make sure you are not logged in as an admin in WordPress by the time you run the report, because once logged any page would have the admin bar at the top,visible and accessible to lighthouse audit.