What are Dashicons and How to Use Them in WordPress

With version 3.8 WordPress introduced Dashicons, the WP admin icon font set. The WordPress Dashicons are a set of over 300 font icons included in the WordPress core. Just like any other font icon, each font icon set contains symbols instead of letters and numbers.

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 File Editor.
Then open functions.php file.
Next, scroll to the end of functions.php and add this code:

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

We recommend creating a child theme before you edit functions.php. If you edit the 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:

First, click on any icon that you like.
Then click on Copy HTML or Copy CSS depending on what you need.
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 posts or pages, 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.

Customizing Dashicons

In 2020, the Dashicons project stopped accepting new icon requests. As a result, you can only create a new icon by modifying one using CSS. Like a text, Dashicons can be styled by changing their size and color using standard CSS properties.

To change the size and color of an icon, you only need to place a code snippet in your site’s style.css file. Head on to Appearance >> Theme File Editor. Next, click on style.css. Paste the code at the bottom of the file:

.dashicons-{icon-name} { 
font-size: 50px; 
width: 50px; 
height: 50px; 
color: blue;
}

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:

First, in the WordPress Dashboard go to Appearance/Menus.
Then add the HTML code of the menu icon you got from WordPress.org to the 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 the end of the Navigation Label field.

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

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 the plugin, you won’t have access to the custom post type you made with that plugin.

Embed Menu Icon in a Custom Post Type Using a Plugin

Using a plugin simplifies the whole process. So if you do not want to take the coding route, this is for you. For this tutorial, we will be using the Custom Post Type UI plugin.

To begin, go to Plugins >> Add New Plugin page on your WordPress dashboard. On the search field, type in the Custom post type plugin. Next, install and activate the plugin.

Upon activation, a menu item ‘CPT UI’ will appear in your admin menu.

Click on the Add/Edit Post Types, then, open the Edit Post Types tab. From the drop-down menu, select the custom post type you wish to modify.

Next, scroll down to the Menu Icon section. If you select the Choose dashicons button, you will get a box with different icons.

Simply pick an icon that fits the custom post type you created.

On the other hand, if you have an image you wish to use, click the Choose image icon button. This will allow you to import the image from WordPress media library.

Once you are done, scroll down and click the Save Post Type button to register your changes. The new icon should appear next to your custom post type.

How to Create a Shortcode

To make Dashicons easier to use for your clients, you can make shortcodes 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. But if you are doing backend WordPress development, you can keep the look of your 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 for more icons. The icon request process is done on github.com/WordPress. 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. But if you need more icons, they offer more if you upgrade to the 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: