What are Dashicons and How to Use Them in WordPress

How to Use Dashicons in WordPress

With version 3.8 WordPress introduced Dashicons, the WP admin icon font set. These icons are high-quality SVG files, meaning they will scale to any size without any pixelization. Although these icons were added for Dashboard menu items, there is nothing stopping you from using them elsewhere. So you can use them for custom plugins, themes, admin panels, and front-end theme design. To start using WordPress Dashicons, you have to do two things. First, enable Dashicons for the theme you are using. Then go to WordPress.org and find HTML or CSS code for the icon you plan to use. Yes, it’s that simple. So let’s go over how to do this in more detail.

Enabling Dashicons on the WP Front-end

Before you start using dashicons, you’ll have to enable them for the theme you are using. This is done by adding a small snippet of code to functions.php file. To do this follow these steps:

  • First, in the WordPress Admin Dashboard go to Appearance/Theme Editor.
  • Then open functions.php file.
  • Next, scroll to the end of functions.php and add this code:

add_action( 'wp_enqueue_scripts', function() {

    wp_enqueue_style( 'dashicons' );

} );

Enabling Dashicons on the Front-end

We recommend creating a child theme before you edit functions.php. If you edit theme file directly and later on there is a theme update, then the update will override changes you made to functions.php. For this reason, it’s always better to have a child theme.

How to get Dashicons HTML and CSS code

WordPress.org provides a dashicons library where you can find HTML and CSS code for every icon. Once you are on WordPress.org look for Developer Resources: Dashicons or click on this link. Then follow these steps:

  1. First, click on any icon that you like.
  2. Then click on Copy HTML or Copy CSS depending on what you need.
  3. A popup window with code will appear. Copy this code to the clipboard by pressing CTRL + C.

With Dashicons enabled and code copied to clipboard, all you need to decide is where to use Dashicons icons on your wp dashboard. For example, You can use them for post meta things like date, category, tag, or author. Also, maybe menu navigation or custom post types on the backend.

Display Dashicons directly in posts and pages

If you want to add icons to post or page this is easy. To do this just add this code in the text editor:

<h2 class="dashicons-before dashicons-smiley">A Cheerful Headline</h2>

Or alternatively, you can use this code:

<h2><span class="dashicons dashicons-smiley"></span> A Cheerful Headline</h2>

Then once you save your post and reload the page you should see the smiley icon.

Display Dashicons directly in posts and pages

How to use WP Dashicons for navigation menu

The more useful example of using WordPress Dashicons is for the navigation menu. To add icons in menus follow these steps:

  1. First, in the WordPress Dashboard go to Appearance/Menus.
  2. Then add HTML code of menu icon you got from WordPress.org to Navigation Label.

As you can see adding an icon to a navigation menu is also simple. In case, you need to display text next to the icon just add text at end of Navigation Label field.

How to use Dashicons for navigation menu

If everything worked correctly you will see the icon displayed on your home page navigation menu.

Example of navigation menu with Dashicons

Using Dashicons on the backend

In case you want to use different icons for custom post types, post titles, or widgets this is even easier. There is no need to change functions.php file since this is on the backend of WordPress. So you can skip the first step we did. To make custom post type with custom icon follow these steps:

  • Go to WordPress Dashboard Appearance/Theme Editor.
  • Next, open functions.php file.
  • Then to register custom post type add this code at end of the file:

function create_posttype() {

    register_post_type( 'movies',

       array(

            'labels' => array(

            'name' => __( 'Movies' ),

            'singular_name' => __( 'Movie' )

            ),

            'public' => true,

            'menu_icon' => 'dashicons-format-video',

            'has_archive' => true,

            'rewrite' => array('slug' => 'movies'),

       )

    );

}

add_action( 'init', 'create_posttype' );

When making your own post types you will want to change code for each post type. So for example to change the post type icons you need to change ‘menu_icon’ => ‘dashicons-format-video’ part of code. In case you don’t want to mess with code you can use the Custom Post Type UI plugin. However, just note that if you deactivate plugin you won’t have access to custom post type you made with that plugin.

Custom post type

How to Create a Shortcode

To make Dashicons easier to use for your clients you can make shortcode for Dashicons. To do this simply add this code to function.php file:

add_shortcode( 'dashicon', function( $atts ) {

    $atts = shortcode_atts( array(

        'icon' => 'menu',

    ), $atts, 'bartag' );

    if ( ! empty( $atts[ 'icon' ] ) ) {

        return '<span class="dashicons dashicons-' . esc_attr( $atts[ 'icon' ] ) . '"></span>';

    }

} );

Then you can use shortcode like this one:

[dashicon icon="format-video"]

Conclusion

In case you need some icons for a WordPress website, Dashicons are a good choice. Or maybe you are doing backend WordPress development, if so you can keep the look of WordPress Dashboard consistent by using the same font icon set as WordPress does.

If you are happy with Dashicons but you are missing some icon you can request icon. The icon request process is done on github.com/WordPress/dashicons. Also, if you want to add your icon to the Dashicons library, that is also possible through the GitHub page.

The dashicons icon set is somewhat limited and there are larger icon fonts out there. So if you need a bigger set of icons, we recommend Font Awesome. They offer a large selection of free icons and if you need even more icons they offer more if you upgrade to PRO version.

For more WordPress tutorials check the rest of our blog out here. If you have further questions write them in the comment section below. Have a great day!

More Resources: