What Are Dashicons and How To Use Them In WordPress

There is a good chance that after WordPress 3.8, you guys heard a bit about Dashicons and wondered what they were.

Using the right visual elements can significantly improve the effectiveness of helping users navigate a complex dashboard or enhancing the navigation process.

The official icon font for WordPress is Dashicons, commonly used in the menu items of the WordPress Dashboard. All the menu icons you see are part of the Dashicon font.

These small yet important design choices contribute to an intuitive user experience, making even the most complex tasks manageable.

Providing developers with a set of seamlessly integrated tools enables them to focus on creating environments that are not only efficient but also visually appealing.

The versatility of icons plays a crucial role in elevating the usability and attractiveness of web applications.

What are Dashicons?

Dashicons are the official icon font for WordPress. You can see them used in your WordPress Dashboard menu items. All those little icons in your menu are examples of the Dashicon font.

The Dashicon font is built into WordPress, yet few know how to use it. You can do some cool things, like adding it to your website menu or even to your posts/pages.

Another great thing about using Dashicons is that they are always pixel-perfect, no matter what size you have them. And, unlike large photos that slow down your site, Dashicons don’t affect your page speed.

There are several different ways to enable the icon font in your WordPress site, and I’ll walk through the two easiest ones.

Two Ways to Enable WordPress Dashicons

Enhancing a WordPress site’s visual appeal and functionality requires the right tools.

Icons are crucial for creating intuitive, user-friendly interfaces. Knowing how to integrate them effectively can make a significant difference.

Here are two simple methods for incorporating dashicons into your WordPress site to help you make the most of these versatile design elements.

Enable Dashicons with this .PHP Snippet

One convenient way to access the Dashicon set promptly is by integrating some PHP code into your theme. WordPress now includes the font by default, so adding the code is quite straightforward.

However, you should probably only use this snippet if you’re using a Child Theme, as messing with the Functions.php file in a main theme is generally a no-no.

Copy this code below and paste it into the functions.php file of your child theme. You can also find this code on GitHub Gist here.

[php]
add_action( ‘wp_enqueue_scripts’, ‘load_dashicons_front_end’);
function load_dashicons_front_end()
{
wp_enqueue_style( ‘dashicons’ );
}
[/php]

Not too fond of pasting code in a delicate area of your theme?

No worries! This next option is easy, too!

Use the Dashicon HTML and Modify with CSS

There is a simple way to use Dashicons on your site without using PHP code. Some simple HTML and a bit of CSS can do the trick just as easily!

Follow the below steps to enable the dashicons with HTML:-

• Go to the Dashicon Site
• Select the Icon you want to use
• Select the option to “Copy HTML”, and copy the code given for the Icon
• Paste the code into the Text Editor or Text Widget of your choosing
• Modify the look of your dashicon with custom CSS

How to Add Dashicon to the Frontend?

Incorporating Dashicons to the front end of your WordPress website is a straightforward process that can greatly improve the visual appeal and user interaction. Dashicons, which is WordPress’s official icon font, can be seamlessly integrated into your theme or content. To include Dashicons in the front end, you must first enqueue the Dashicons stylesheet in the functions.php file of your theme.

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

This piece of code ensures that the Dashicons font is loaded and accessible for use on the front end of your website. Once the stylesheet is enqueued, you can utilize Dashicons in your content by applying the relevant CSS class to HTML elements. For instance, to showcase the “dashicons-admin-home” icon, you would include the class dashicons dashicons-admin-home in your HTML element as follows:

<span class="dashicons dashicons-admin-home"></span>

This approach enables you to conveniently incorporate icons into menus, buttons, or any other section of your website’s front end, providing you with the flexibility to establish a more engaging and visually cohesive interface.

How to Add Dashicon to the Backend?

Icons from the Dashicons set can be utilized in the WordPress admin area to represent custom sections added to the sidebar menu of the admin dashboard. These customized sections are known as menu pages and are typically created by plugin and theme developers to introduce new features for custom post types or option sets. When custom icons are added to these menu sections, it helps users to easily locate and identify them in the future.

In order to add a custom post type to your WordPress site, the first step is to register it using the register_post_type() function. One of the parameters accepted by this function is menu_icon, which allows you to specify the icon displayed alongside the custom post type menu section in the admin dashboard. This feature has contributed to Dashicons becoming one of the most popular choices for plugin and theme developers.

To make use of Dashicons, you need to specify the full name of the icon as the value for the menu_icon parameter when calling the register_post_type() function (e.g. dashicons-format-video).

Conclusion

By default, the icons are 20 pixels wide, but using FireBug in Firefox or the Inspect Element option in Google Chrome will help you find the CSS element so that you can manipulate the CSS code live.

After you have customized the Icon to your desired look and feel, copy it from your Inspector of choice and paste it into the Custom CSS area in your WordPress Dashboard.

We have also mentioned adding the icons to the menu on your website. If you’d like an easy way to add an icon to your navigation menu, then check out this tutorial as well:

• How to create Navigation Menu in WordPress

Have you guys had a chance to use Dashicons? We’d love to hear how you used them!