Using DashIcons in conjunction with $wp_admin_bar->add_menu()

  • Resolved David Gard

    (@duck_boy)


    10 years, 10 months ago

    Hey all,

    I’m just updating a couple of plugins to make them compatible with 3.8 and the new (ugly?) admin area, and I’ve hit a brick wall with the Admin Bar and the new DashIcons.

    Take the example below – does anyone know how I’d amend this so that I can include my chosen DashIcon next to the text link?

    $wp_admin_bar->add_menu(array('id' => 'charts', 'title' => __('Charts'), 'href' => admin_url('/admin.php?page=charts')));
if(current_user_can('create_charts')) :
    $wp_admin_bar->add_menu(array('parent' => 'charts', 'id' => 'add-chart', 'title' => __('Add Chart'), 'href' => admin_url('/admin.php?page=add-chart')));
endif;

    I’ve tried the following CSS, but all that does is push the text underneath the icon, as opposed to show before it (almost like there is a width issue). Also the icon is not the correct size.

    #wpadminbar #wp-admin-bar-charts:before{
	font-family: "dashicons" !important;
	content: "\f185" !important;
}

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter David Gard

    (@duck_boy)

    I had to properly add the containers that the Admin Bar uses, and viewing /wp-includes/admin-bar.php showed me what I needed to do.

    add_action('admin_bar_menu', 'on_admin_bar', 35);
function on_admin_bar(){

	global $wp_admin_bar, $wpdb;

	if(!current_user_can('edit_charts') || !is_admin_bar_showing()) :
		return;
	endif;

	/* Add the Admin Bar item */
	$wp_admin_bar->add_menu(array(
		'id' => 'charts',
		'title' => '<span class="ab-icon"></span><span class="ab-label">'._x( 'Charts', 'admin bar menu group label' ).'</span>',
		'href' => admin_url('/admin.php?page=charts'),
		'meta'  => array(
			'title' => __('Charts'),
		)
	));
	if(current_user_can('create_charts')) :
		$wp_admin_bar->add_menu(array(
			'parent' => 'charts',
			'id' => 'add-chart',
			'title' => __('Add Chart'),
			'href' => admin_url('/admin.php?page=add-chart')
		));
	endif;

}

    And the CSS required is –

    #wp-admin-bar-charts .ab-icon:before{
	font-family: "dashicons" !important;
	content: "\f185" !important;
}

    To find the number of the correct icon to use (to replace \f185), visit the Dashicons page, click the icon you want to use, and then click on Copy CSS at the top of the page.

    IstanbulMMV

    (@istanbulmmv)

    Many thanks David – just what I was looking for.

    To ensure icons are also viewable in mobile/responsive view, add:

    @media screen and (max-width: 782px) {
          #wpadminbar li#wp-admin-bar-charts {
                    display: block;
          }
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Using DashIcons in conjunction with $wp_admin_bar->add_menu()’ is closed to new replies.