How to Use Dashicons in WordPress

From the WordPress 3.8 update, which was a long time ago now, Dashicons have been an icon pack that was included in WordPress by default. They can be seen in various links within the dashboard’s sidebar menu—both those which are a part of WordPress and those enabled by plugin and theme authors. The icons make the sidebar links more noticeable and easily recognizable.

While they are perfect for the WordPress backend area, Dashicons can also be used on the website’s frontend. You can add them to help highlight a specific text, button, menu item, section, or something else entirely. Since their use spans across a whole WordPress website, we created this comprehensive article covering different applications of Dashicons that all WordPress users can benefit from. During the course of it, we’ll cover the following topics:

How to use Dashicons in WordPress

Since Dashicons can be used for a variety of reasons, we sorted the applications we’ll be covering into two separate sections. They are sorted based on where the Dashicons are used and the amount of code needed to implement them. We took care to elaborate on each section and provide thorough instructions. However, as some of the methods for using Dashicons are more developer-friendly, you shouldn’t hesitate to do research on the side.

The prerequisites for starting

Before going into the details on how to add a Dashicons icon to your WordPress website, there are a couple of things that need to be done first. Some of them are directly tied to how Dashicons are used, while others are common precautions you should take when adding code to a WordPress website. As such, we list them below and we advise everyone to carefully review this section before proceeding to the main part of the article.

Firstly, all PHP code snippets that we mention in this article should be added via FTP inside one of two places—the functions.php file of your child theme or a site-specific plugin. Additionally, we suggest making a backup of your website before adding any code. This will ensure that no harm is done to your website should something go wrong.

Apart from that, there are two additional things that you need to do. They are specific to the process of adding Dashicons to a WordPress website, so we urge you to study them carefully.

While Dashicons are enabled by default within the admin dashboard, this is not the case for the frontend of your website. If you plan on using them on the frontend, you will need to enable them for the frontend first. To do that, you can use the following code snippet:

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

To clarify, this snippet simply enqueues the Dashicons stylesheet by placing it in a separate function called qode_use_dashicons_on_front_end(). It then hooks that function onto the wp_enqueue_scripts action hook. This is the proper hook for enqueueing both scripts and stylesheets that are used on the frontend of a WordPress website.

The final requirement for adding Dashicons to your site’s frontend is knowing how to find the icons belonging to the Dashicons icon pack, as well as retrieve the relevant data for each icon. That data is the name of the icon and the HTML code behind it. Depending on whether you wish to add the icon to the website’s backend or frontend, you will need to know the name or the latter. We will show you how to retrieve these two pieces of information for each icon.

To find all the icons belonging to the Dashicons icon pack, navigate to the Dashicons page first. After accessing the page, you will see that the menu icon is displayed by default, as it is the first icon in the list. You will also see a wide range of icons that are sorted into several different categories. Browse through all the icons and, after choosing the one you wish to add to your website, click on it to select it.

The URL of the page will change to match the name of the selected icon and that icon will be displayed at the top of your screen. This is where you’ll be able to copy the icon code and see the full icon name.

There are three ways to get the code that will let you include an icon on your website—by copying the CSS, HTML, or Glyph. For this article, we decided to use the dashboard icon as an example. And we opted for the Copy HTML option of the three that are provided.

Therefore, click on the Copy HTML link associated with the icon you selected.

Once you’ve done that, a popup message screen will appear showing the HTML code you need to use to display your icon. Copy the HTML code you get and then press the Ok button to close the message screen.

After copying the HTML code, you can paste it into any part of your WordPress website that accepts HTML code and displays it on the frontend. Those parts include your navigation menus, the content of your pages and posts, and widgets that use shortcodes or accept HTML code.

And if you’re interested in displaying the icon on the backend of your website, you will need to use the icon’s name, which you can see above the HTML code we copied. But we’ll be talking about this in more detail in the section on adding Dashicond to the backend.

How to add Dashicons to the frontend

In this section, we’ll show you how to add a Dashicons icon to your website’s frontend by directly pasting the HTML code necessary for the icon to be created. Before you dive in, don’t forget to visit the previous section and find out how to obtain the HTML code for the icon you wish to add to your WordPress website. Once you’ve done that, proceed as described below.

To add the HTML code of your Dashicons icon to a WordPress navigation menu, navigate to the Appearance > Menus section within your admin dashboard. Then, select the menu you wish to edit and click on a menu item where you want to add the icon.

Next, look for the Navigation Label option within the expanded menu item area. You will need to paste the HTML code directly inside that area. Depending on whether you want the icon to appear before or after the menu item when displayed on the website, you should paste the code before or after the existing menu item label. After adding the HTML code, press the Save Menu button to save the changes you’ve made.

Then, examine the frontend of your website to see how your chosen icon looks.

To add a Dashicons icon to the content of a WordPress page or post you should first copy the HTML code of the icon you wish to add as explained in the prerequisites section.

Then, you will need to place the HTML code inside an HTML rendering shortcode. For most page builders, that is the Custom HTML shortcode, or the Custom HTML block if you are using the Gutenberg editor. Please note, for Classic Editor users, this means pasting HTML code inside the editor’s Text tab.

If you want to add a Dashicons icon to a widget area, you can insert the same HTML code inside a Custom HTML widget. The principle is the same as the one you’d use to add the code to the Custom HTML block.

With that being said, to add the icon, open a page or post and add a Custom HTML block to it. You can directly paste the code you copied into the block or wrap it with additional HTML code. We’ve done both for this article, and you can see how it turned out below.

After adding the HTML code, update the page/post and examine it from the frontend, to see the result.

How to add Dashicons to the backend

Dashicons can also be used in the WordPress backend as icons next to custom sections created within the admin dashboard’s sidebar menu. These sections are referred to as menu pages. They can be created for custom post types or new sets of options by plugin and theme developers for implementing new functionalities. In that case, adding custom icons next to those menu sections helps users spot them easily and recognize them more quickly in the future.

In this section, we will explain how you can add Dashicons specifically to custom sections. We will also show you how to create a custom Dashicons shortcode if you aren’t satisfied with just adding the plain HTML code we previously mentioned. Let’s begin!

To add a custom post type to your WordPress website, you will need to register it first using the register_post_type() function. Among the many parameters this function accepts, is the menu_icon parameter. It allows you to specify which icon is displayed next to the custom post type menu section within the admin dashboard. This has also made Dashicons one of the most popular choices for plugin and theme authors.

To use Dashicons, you must set the menu_icon parameter to the full name of the icon when the register_post_type() function is called (e.g. dashicons-format-video).

To illustrate this, we leave you with a simple example of how you can register a custom post type called movie with a corresponding menu section that has the dashicons-format-video icon next to it.

function qode_register_movie_cpt() {
register_post_type( 'movie',
array(
'labels' => array(
'name' => esc_html__( 'Movies', 'your-translate-domain' ),
'singular_name' => esc_html__( 'Movie', 'your-translate-domain' ),
'add_item' => esc_html__( 'New Movie', 'your-translate-domain' ),
'add_new_item' => esc_html__( 'Add New Movie', 'your-translate-domain' ),
'edit_item' => esc_html__( 'Edit Movie', 'your-translate-domain' )
),
'public' => true,
'menu_position' => 5,
'menu_icon' => 'dashicons-format-video'
)
);
}
add_action( 'init', 'qode_register_movie_cpt' );

With this small code snippet, we registered the movie post type using the qode_register_movie_cpt() function which is hooked to the init action hook. Within the function, we specified some of the labels for the new section, including its name—Movies. We also made the post type publicly viewable and placed it directly below the Posts section, so it’s near the top of the admin dashboard left-side menu.

Most importantly, we specified that the icon that the Movies section has is the dashicons-format-video. If we hadn’t specified the exact icon, the default dashicons-admin-post icon would have been used. This is the same icon that is used for the Posts section, so keeping it might have proven visually confusing to some WordPress users.

You can see how the code we used turned out.

With that being said, creating a custom post type is a separate, advanced WordPress topic. We covered it in detail in our article on creating custom post types, and you can check it out for a full overview of the process.

Besides what we described above, there is another way of adding a new section (i.e. menu page) within the dashboard sidebar menu. This is done using the add_menu_page() function. Similar to the previous function, it is mostly used by plugin and theme developers to implement their custom options.

Like the previous function, the add_menu_page() accepts the $icon_url parameter among others. However, apart from the URL to a specific base64-encoded SVG file, you can also insert the Dashicons helper class name. This is what we meant when we referred to a Dashicons icon’s name earlier (e.g. dashicons-media-code).

You can see a simple coding snippet below, illustrating this use of Dashicons.

function qode_register_a_custom_menu_page() {
add_menu_page(
esc_html__( 'Custom Options', 'textdomain' ), // Browser tab title
esc_html__( 'Custom Options', 'textdomain' ), // Admin sidebar menu title
'administrator',
'custom-options-page',
'qode_custom_options_page_HTML',
'dashicons-media-code',
100
);
}
add_action( 'admin_menu', 'qode_register_a_custom_menu_page' );
function qode_custom_options_page_HTML() {
esc_html_e( 'Option code goes here...', 'textdomain' );
}

This code represents two functions—qode_register_a_custom_menu_page() and qode_custom_options_page_HTML().

The former is hooked to the admin_menu action hook and it is responsible for the creation of the new menu page as it contains the use of the add_menu_page() function. As for the parameters we used, we made it so that the title displayed in the browser tab and the sidebar menu is set to Custom Options. We also made the section available only to users with administrator capabilities, i.e. those with the administrator user role.

The latter is used to create the content of this section and set the menu icon to dashicons-media-code. Since this is a simple snippet used as an example, we made it so that the qode_custom_options_page_HTML() function displays the text Option code goes here… as a placeholder. Otherwise, the options that would need to be coded would be placed there. The snippet’s output is shown below.

As a last possible use of Dashicons, we will take a look at custom shortcodes. Premium themes or plugins might offer icon shortcodes that they’ve created and which you can use with ease. This is the case with the themes in the Qode Interactive catalog.

However, if you prefer or your theme/plugins don’t include a custom icon shortcode, you can create your own. All you need is a bit of coding knowledge and a place to start. While the former is up to you, we can help with the latter. So, for this article, we created a simple Dashicons custom shortcode as an example.

function qode_custom_dashicon_shortcode( $atts ) {
$default_atts = array(
'icon_name' => 'menu',
'icon_color' => '',
'margin' => '',
'custom_class' => ''
);
$params = shortcode_atts( $default_atts, $atts );
$icon_styles = '';
$icon_classes = 'custom-icon dashicons';
// Creating the icon styles
if ( ! empty( $params['icon_color'] ) ) {
$icon_styles .= 'color: ' . $params['icon_color'] . '; ';
}
if ( ! empty( $params['margin'] ) ) {
$icon_styles .= 'margin: ' . $params['margin'] . '; ';
}
// Adding the icon classes
if ( ! empty( $params['icon_name'] ) ) {
$icon_classes .= ' dashicons-' . $params['icon_name'];
}
if ( ! empty( $params['custom_class'] ) ) {
$icon_classes .= ' ' . $params['custom_class'];
}
return '<span class="' . esc_attr( $icon_classes ) . '" style="' . esc_attr( $icon_styles ) . '"></span>';
}
add_shortcode( 'custom_dashicon', 'qode_custom_dashicon_shortcode' );

Let’s briefly explore this code.

To start with, it represents a function called qode_custom_dashicon_shortcode() which is added as a custom_dashicon shortcode using the add_shortcode() function. The main part contains the code that creates and renders the icon.

The icon accepts four parameters—a shortened name for it, and the color, margin, and custom class you wish to add to it. The shortened name of the icon is the part of the label that comes after dashicons– since we added the first part already within our custom shortcode. For example, if a full Dashicons icon name is dashicons-index-card, the shortened name used for this shortcode would be index-card.

The output of this shortcode is the same as the HTML code that can be copied from the Dashicons page, but with a bit of additional CSS code. This CSS was created using the remaining parameters that can further stylize the icon—icon color, margin, and custom class.

Now that you know what the shortcode does, let’s explain how to use it. In general, any custom shortcode can be used by placing its shortcode call inside a shortcode-rendering element. The particular element you use can vary depending on your preferred page editor. In Gutenberg, you’d use the Shortcode block. For Classic Editor users, you can add the shortcode call directly inside the Visual tab of your editor. WP Bakery users can put the shortcode call inside the Visual tab of the Text Block element, while Elementor users can place it within the Visual tab of the Text Editor element. If you’d like to see this explained in more detail, you can check out our article on custom shortcodes, and the section on using custom shortcodes in particular.

In this article, we will stick to using the Gutenberg editor only. Therefore, to use this shortcode on one of your pages or posts, add the Shortcode block to it and place the shortcode call within the block. Then, update the page/post by pressing on the Update button in the top-right corner of the screen.

The shortcode call consists of the shortcode name—custom_dashicon—followed by a list of parameters it accepts. Each parameter gets its respective value, displayed in the parameter=’value’ manner.

[custom_dashicon icon_name='index-card' icon_color='#007FFF' margin='20px 30px' custom_class='qode-dashicon']

After adding your shortcode call, review the page to observe the shortcode’s output. You can see the result we got in the screenshot below.

Final Thoughts

In this article, we discussed the various ways of including Dashicons in the content of your WordPress website. Whether you’d like to add them to your site’s frontend or backend, there are several options to choose from. These range from pasting the icon’s HTML code inside an appropriate navigation menu item, HTML-rendering shortcode or widget to adding custom functionalities that contain the icon, such as custom shortcodes, custom post types, or custom options pages.

While you can try to find WordPress plugins or themes that will let you add Dashicons and custom functionalities, you can use these instructions and add them, fully customized, on your own. With the information we covered, you will easily be able to do it yourself simply following the steps we described. And, since we covered a lot of important WordPress concepts within this article, reading through it should benefit a wide range of WordPress users, especially those interested in growing their knowledge.