How To Add Dashicons In WordPress Properly

Dashicons are the built-in icon fonts in WordPress. Dashicons in WordPress were introduced in version 3.8.

By default, the dashicons are loaded on the back-end only. But you can use a simple code to add dashicons to the front-end also.

Every theme developer nowadays gives preference to use icons instead of images because icons load faster.

WordPress dashicons can be consumed by theme and plugin developers also. You can use them everywhere but not beyond the circle.

Let’s see how we can add them to the front-end and use them for the back-end.

How To Add Dashicons In WordPress?

You don’t have to enqueue the dashicons if you are using it on the back-end because the dashicons in the WordPress administration section are loaded by default.

But if you want to use these default icons in your WordPress theme, you have to make them available.

Lets see how to make them available in WordPress front-end?

Adding Dashicons on the front-end

These days many themes/plugin developer make use of icons to make the products better looking. Those who primarily develop WordPress themes or plugins use dashicons on their projects.

To use dashicons on the frontend, you have to place the following code in the functions.php file.

Go to Appearance>>Editor>>functions.php.

Add this code to enqueue WordPress dashicons on frontend.

//Enqueue the Dashicons on frontend
add_action( 'wp_enqueue_scripts', 'wg_load_dashicons_front_end' );
function wg_load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

After placing the code, you can use dashicon fonts on frontend easily.

How to Use Dashicons on frontend?

You might be searching for the cheat-sheet of WordPress dashicons. This section will tell you where the cheatsheet is and how to use the icon fonts on the right.

Cheat-sheet of these icon fonts can be found here.

It is the official cheat-sheet of Dashicons. The icons are made by WordPress and also consumed by WordPress.

How to Use Dashicons Cheat-sheet?

When you visit the official cheat-sheet, you get hundreds of icons to choose from.

Once you select any icon, you get the details of the icon on top.

You get three options.

Option #1: Copy CSS

If you want to use the icons in CSS, you can copy the CSS code by clicking the “Copy CSS” link.

Once you hit the link, you will get the code in a pop-up. Copy the code before clicking the “Ok” button.

Now you can use it in your CSS file.

Option #2: Copy HTML

Sometimes you write your own HTML markup for a website and don’t want to create a massive CSS file.

In that case, you can use HTML to show the icon.

The process is the same as copying CSS. Hit the “Copy HTML” link and copy the code.

Then click the OK button and you are all set.

Option #3: Copy Glyph

If you have Photoshop, you can use these fonts easily. Just copy the Glyph just like we did to CSS/HTML, copying and paste that in the Photoshop text field.

Can we use Dashicons on Custom Post Types?

Many of you may ask the question of whether we can use these icons for custom post types or not.

The answer is, “Yes.” You have to define the custom post type and then use the parameter ”menu_icon.’

There you have to use the Dashicons font as a class.

Let’s create a simple custom post type of products.

// Our custom post type function
function create_custon_post_type() {

register_post_type( 'products',
array(
'labels' => array(
'name' => __( 'Products' ),
'singular_name' => __( 'Product' )),
'public' => true,
'menu_icon' => 'dashicons-admin-generic',
'has_archive' => true,
'rewrite' => array('slug' => 'products'),
)
);
}
// Hooking up our function to theme setup
add_action( 'init', 'create_custom_post_type' );

Here, I am using the setting icon. I have copied the icon class and passed that value to the 'menu_icon' argument.

The final result will be just like this.

Conclusion

Now you understand how to use Dashicons properly. Now it is time for some practicality.

Please let me know if you have any questions or concerns regarding WordPress dashicons usage.

Also, please let me know how your experience was while working with Dashicons.

Do share with your friends and colleagues.