Add Dashicons in WordPress Themes and Plugins

This article shows how you can add Dashicons in WordPress Themes and Plugins. Dashicons are the cool font icons used by WordPress in the admin area. Dashicons were designed for the first time by Mel Choye for using in Admin UI and were included in WordPress after the release of WordPress version 3.8. Dashicons have all the properties of text so they remove all the drawbacks of using images as icon. The size, color and other properties of a Dashicon can be easily modified using CSS. These wonderful icons can be used to identify posts, media tools, editor tools etc.

Add Dashicons in WordPress Themes and Plugins

You can see the complete list of icons in the official Dashicons WordPress Page. Just like Dashicons, there are many other free font icons available with lots of icons. Sometimes the icons that you don’t find in Dashicons can be found in other free icon fonts. Here is the list of some popular icon fonts.

Although, in admin environment WordPress loads Dashicons by default; but Dashicon Font is not loaded as part of any theme. So, what to do for using Dashicons inside our themes?

Add Dashicons in WordPress Themes and Plugins

Displaying Dashicons in front-end

To use Dashicons in the front end of your theme, first you have to enqueue it using some basic PHP code in your functions.php file. WordPress installation comes with pre-installed Dashicon, So with enqueue we make the Dashicons available for use in the front end.

Copy and paste the following code in functions.php file. To reach Functions.php file, go to Appearance >> Editor and search for the file in templates in the right side of the Editor page.

add_action('wp_enqueue_scripts', 'dashicons_front_end');

function dashicons_front_end() {
   wp_enqueue_style('dashicons');
}

Now enter the official Dashicons WordPress Page and select the icon you want to use. You can copy the icon in different formats: HTML, CSS and Glyph. For demonstration propose i am using thumbs-up icon in HTML format.

Add Dashicons in WordPress Themes and Plugins

 Click the Copy HTML link which will open a pop-up window with the HTML text to copy for the icon.

Add Dashicons in WordPress Themes and Plugins

The HTML text looks something like this.

<span class="dashicons dashicons-thumbs-up"></span>

Copy the text in pop-up window and paste it into your editor or text widget in the required area.

You can style the icon in your stylesheet according to your need.

.dashicons-thumbs-up {
    font-size: 100px;
    color: #952D2D;
}

After following these steps, the icon will look something like this

Add Dashicons in WordPress Themes and Plugins

Manually Adding Icon to a Custom Post Type

You can add menu icons manually if you have created a custom post type by placing a code in your site-specific plugin or functions.php file. First lets see the full code to make a custom post type.

// Register Custom Post Type
function custom_post_type() {

   $labels = array(
      'name'                => _x( 'products', 'Post Type General Name', 'text_domain' ),
      'singular_name'       => _x( 'Product', 'Post Type Singular Name', 'text_domain' ),
      'menu_name'           => __( 'Products', 'text_domain' ),
      'parent_item_colon'   => __( 'Parent Item:', 'text_domain' ),
      'all_items'           => __( 'All Items', 'text_domain' ),
      'view_item'           => __( 'View Item', 'text_domain' ),
      'add_new_item'        => __( 'Add New Item', 'text_domain' ),
      'add_new'             => __( 'Add New', 'text_domain' ),
      'edit_item'           => __( 'Edit Item', 'text_domain' ),
      'update_item'         => __( 'Update Item', 'text_domain' ),
      'search_items'        => __( 'Search Item', 'text_domain' ),
      'not_found'           => __( 'Not found', 'text_domain' ),
      'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),
       );
   
   $args = array(
      'label'               => __( 'Products', 'text_domain' ),
      'description'         => __( 'Post Type Description', 'text_domain' ),
      'labels'              => $labels,
      'supports'            => array( ),
      'taxonomies'          => array( 'category', 'post_tag' ),
      'hierarchical'        => false,
      'public'              => true,
      'show_ui'             => true,
      'show_in_menu'        => true,
      'show_in_nav_menus'   => true,
      'show_in_admin_bar'   => true,
      'menu_position'       => 5,
      'menu_icon'           => 'dashicons-cart',
      'can_export'          => true,
      'has_archive'         => true,
      'exclude_from_search' => false,
      'publicly_queryable'  => true,
      'capability_type'     => 'page', 
      );
   register_post_type( 'Products', $args );
}

// Hook into the 'init' action
add_action( 'init', 'custom_post_type', 0 );

This code will add a custom post type named Products in the dashboard.

Also Read:   Prevent Image Theft with Watermark My Image Plugin in WordPress

Add Dashicons in WordPress Themes and Plugins

In the above code Product post type is using dashicons-cart icon. The icon is being displayed with a simple line in the code which is :

 'menu_icon' => 'dashicons-cart',

To add different icon to custom post type simply visit Dashicons website and select an icon. Then copy the name of the icon.  Replace the value of variable menu_icon with the copied name of the icon as shown here:

 'menu_icon' => 'dashicons-thumbs-up',

Add Dashicons in WordPress Themes and Plugins

You can also add the full URL of an image file you want to display as icon, like this:

 'menu_icon'           => 'http://www.example.com/wp-content/uploads/your-icon.png',

That’s all. These simple PHP instructions will allow you to use any icon included in the Dashicons Font into your website.

The following two tabs change content below.

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post