How to Enable Dashicons in WordPress?

Have you ever admired the sleek, vector-based icons on your WordPress dashboard and wondered how you could bring them to the front end of your site?

You’re not alone. Everyone loves Icon.

I am talking about the icons, known as Dashicons, are a favorite tool among WordPress developers for their scalability and web-optimization.

Yet, they aren’t automatically available for frontend use. So, how do you enable them?

In this guide, I’ll explain you how to enable and use Dashicons to bring the aesthetic of Dashicons to your WordPress site’s front end.

Let’s get started!

What is Dashicons?

Dashicons is a set of icons that are lightweight and easy to implement. It is an official icon font for WordPress. It’s a set of web-optimized vector-based icons that can be scaled to any size without any distortion so that it provide an amazing experience even for high-resolution displays.

By Default, cons are used in the WordPress admin dashboard since it was introduced in WordPress version 3.8 and can also be used by developers within their own themes or plugins.

How to Enable Dashicons in WordPress? 1
Dashicons – WordPress Default Icon Library

How to Enable Dashicons in WordPress FrontEnd?

There is a pre-defined and bundled stylesheet for dashicons that comes along with WordPress. Hence, it is really easy to enable dashicons in WordPress frontend.

You just need to activate the bundled dashicons stylesheet of WordPress Core to frontend.

You can add the dashicons stylesheet to themes function.php or a custom plugin using the action wp_enqueue_scripts.

wp_enqueue_scripts hook: This hook will help you to add scripts and styles to the frontend. For more information, check Developer Codex.

Here is the ready code that you can use to add dashicons support to the WordPress frontend:

/**
 * Add support for Dashicons to WordPress frontend.
 */
function mg_load_dashicons_to_frontend() {
	wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'mg_load_dashicons_to_frontend' );

This function tells WordPress to load the Dashicons stylesheet when it’s loading the rest of your theme’s scripts and styles. Now you should be able to use Dashicons on the front end of your site.

For example, to display a specific icon, you might add something like the following to your HTML:

<i class="dashicons dashicons-format-video"></i>

Remember to replace format-video with the name of the icon you want to display. You can find a list of Dashicon classes on the official Dashicons page.

Conclusion

Isn’t it easy?

I’ve used dashicons in frontend for many WordPress websites. Dashicons is lightweight and easy to use icon library.

If you feel that you need a new icon added to Dashicons library. Then, create a new issue on Dashicons Github.

Will you give it a try? Let me know via the comments section below.

Loved this article? Feel free to share with your friends and colleagues using Twitter or any of your preferred social media.
Mehul Gohil
Mehul Gohil

Mehul Gohil is a Full Stack WordPress developer and an active member of the local WordPress community. For the last 10+ years, he has been developing custom WordPress plugins, custom WordPress themes, third-party API integrations, performance optimization, and custom WordPress websites tailored to the client's business needs and goals.

Articles: 123

Newsletter Updates

Enter your email address below and subscribe to our newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *