Leave a Reply

2 comments

  1. I had this problem a while back.
    The easiest solution would not be with css but with a function that removes that menu item from the admin bar.
    Then just add a new menu item with your logo image.
    I would do this instead of replacing the icon with your logo with css.

    /*Remove WordPress menu from admin bar*/
        add_action( 'admin_bar_menu', 'remove_wp_logo', 999 );
    
        function remove_wp_logo( $wp_admin_bar ) {
            $wp_admin_bar->remove_node( 'wp-logo' );
        }
    
        /*Adds Custom Logo to Admin Bar*/
        add_action( 'admin_bar_menu', 'custom_admin_logo', 1 );
    //priority 1 sets the location to the front/leftmost of the menu
    
        function custom_admin_logo( $wp_admin_bar ) {
            $custom_logo_id = get_theme_mod( 'custom_logo' ); //Uses theme logo
            $custom_logo_url = wp_get_attachment_image_url( $custom_logo_id , 'full' );
            $args = array(
                'id'    => 'custom_logo_admin',
                'title' => ' ',
                'meta'  => array( 'html' => '<li id="custom-logo-admin-bar" style="width: 230px;padding: 10px;padding-left: 0px;padding-right: 25px;"><img class="overlay" src="'.$custom_logo_url.'" style="float: left;width: 100%;height: auto;"></li>' )
            );
            $wp_admin_bar->add_node( $args );
        }
    

    You can style your image with css either in your stylesheet or directly here in the meta array.
    The $wp_admin_bar->add_node( $args ); is what actually adds the new node into the admin bar.
    P.S. some of the styling here is just what I needed for my own purposes, feel free to change.

  2. Maybe you should just overwrite the CSS for it and replace it with your own image so the functionality will stay in tact!

    This is the original CSS:

    #wp-admin-bar-wp-logo > .ab-item .ab-icon {
       background-image: url("../wp-includes/images/admin-bar-sprite.png?d=20120830");
       background-position: 0 -76px;
       background-repeat: no-repeat;
       height: 20px;
       margin-top: 4px;
       width: 20px;
    }
    

    You might want to change it in:

    #wp-admin-bar-wp-logo > .ab-item span.ab-icon {
       background-image: url("your-image.png");
       background-repeat: no-repeat;
       height: 20px;
       margin-top: 4px;
       width: 20px;
    }
    

    Notice the addiational span to .ab-icon to make it more specific.

    For any legal questions check their licence page:
    https://codex.wordpress.org/License

    And the GPL licence:
    https://www.gnu.org/copyleft/gpl.html