What Are Dashicons and How To Use Them In WordPress

Dashicons are a pre-installed collection of font icons that are an integral part of WordPress. They were initially introduced in WordPress 3.8 during a major overhaul of the backend user interface. By default, Dashicons are utilized for various links found on the left-hand side of the WordPress admin bar. However, they offer the flexibility to be customized to match specific requirements.

These icons are not restricted to WordPress core usage alone. They can also be employed in your own custom plugins and themes. Dashicons can be utilized when defining new post types, creating custom admin panels, or even incorporated into the design of your front-end themes. Despite being primarily designed for core functionality, they can be seamlessly integrated into any custom plugin or theme you develop. The best part is that implementing Dashicons is incredibly straightforward!

By leveraging Dashicons, you can enhance the visual appeal and user experience of your WordPress projects, ensuring a consistent and professional interface throughout. For more official guidance, visit the WordPress Developer Resource on Dashicons (high-authority source).

You can use these icons on:

• WordPress dashboard
• Navigation menus
• Pages and posts
• Metadata
• Editor elements
• Custom plugins and themes
• Admin panels
• Front-end design

What Are Dashicons?

Dashicons are a set of vector icons that are built into WordPress. These icons are specifically designed for use in the WordPress admin area and can be used in themes, plugins, and customizations. The Dashicons library consists of a wide range of icons that cover various functions and elements commonly found in the WordPress ecosystem. With Dashicons, you can easily incorporate visually appealing icons into your WordPress site without the need for additional image files or third-party icon libraries. According to WordPress.org, Dashicons have been a core feature since version 3.8.

Difference between image icons and icon fonts?

Icon fonts and image icons are somewhat similar, but instead of alphabets, vector symbols are there in icon fonts.

Is it possible that I got a little too technical there?

Please allow me to clarify.

On the surface, these icon fonts look like images that you can use to add symbols to your website, but they are not actually images themselves. They provide a plethora of advantages to you. For a deeper dive into web typography, refer to the W3C CSS Fonts Module.

What advantages does the usage of Dashicons offer?

1. Scalability: Dashicons, being font-based, can be easily scaled without losing quality. Just like regular text on your website, you can adjust the size of Dashicons to fit your design requirements.
2. Lightweight: Unlike image-based icons, Dashicons are lightweight as they are implemented as fonts. This means they have no impact on page loading speed, resulting in faster load times for your website. Google’s Web Fundamentals emphasize the importance of lightweight assets.
3. Customization: Dashicons can be customized using CSS, allowing you to change the color, apply gradients, add shadows, and apply various other visual properties. This gives you the flexibility to match the icons with your overall design and branding.
4. Reduced HTTP Requests: By utilizing Dashicons as fonts, you can load them in bulk and utilize them across multiple pages of your website. This helps reduce the number of HTTP requests required to load individual images, leading to improved performance and faster page load times.
5. Easy to Use and Adapt: Working with Dashicons is straightforward. You can easily incorporate recognizable and creative symbols without the need to recreate them every time you require an icon. This makes it convenient to add icons for various purposes such as video players, emails, music, and more on your website.
6. WordPress Integration: As Dashicons are integrated into WordPress, they provide greater accessibility. This means that users with assistive technologies can benefit from these icons, improving the overall accessibility and usability of your website. The WordPress Accessibility Team continually works to ensure inclusive design.

Overall, Dashicons offer a range of benefits including scalability, lightweight implementation, customization options, reduced HTTP requests, ease of use, and enhanced accessibility, making them a valuable asset for your WordPress projects.

Integrating Dashicons Into Custom Post Types

It is sufficient to set the menu icon argument to the CSS classname of the Dashicon you wish to use when creating a new custom post type in WordPress, and this icon will be defined as the icon that appears next to the name of your custom post type in the WordPress admin panel on the left-hand side of the screen.

Simply go to the Dashicons landing page and click on any icon you want to use. You’ll see the classname at the top of the page next to the icon, which you can copy and paste into your website or application.

// Register a new custom post type named Portfolio
register_post_type( 'portfolio', array(
    'public' => true,
    'menu_icon' => 'dashicons-portfolio',
    'label' => __( 'Portfolio', 'local' ),
);

Incorporating Dashicons into the theme’s front-end design

There are numerous icons used in front-end themes these days, including post meta icons (date, category, tag, author), as well as header icons such as the user, search, and shopping cart icons (to name a few).

However, while FontAwesome is the most widely used and popular font icon set available, and while it is a great choice for most projects, it is also a very large icon set that includes many icons you will never use; you could use a font generator website such as Fontello to create a stylesheet of only the icons you need, but another option is to use Dashicons, which is already included in your WordPress installation.

To make Dashicons appear on the front-end of your website, simply include the following code in your theme’s functions.php file (insert via a child theme if you are customizing an existing theme and not making your own).

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

You can now insert an icon into an HTML document using the following syntax:

<span class="dashicons dashicons-menu"></span>

Shortcodes for Dashicons: How to Create One

Another option for incorporating Dashicons into your website’s front-end would be to create a shortcode that can be used anywhere on the site. A good example of this would be if you’re creating a website for a client and you want to make it easier for them to insert icons on the site without having to mess around with HTML codes.

Here’s an example of what that code might look like; all you have to do now is paste it into your functions.php file (or other non-template file being loaded by functions.php)

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>';
    }
} );

Shortcode usage:

[dashicon icon="chart-pie"]

Dashicon Icons

Currently there are more than 300+ icons in WordPress. Below I have attached screenshot of Dashicons available.

What is the best way to use Dashicons?

The majority of dashicon icons are used on the back end by WordPress themes, so if you are creating custom post types and want to include dashicon icons, that is something you can do.

Making use of Dashicons in the frontend

If you intend to use Dashicons on the frontend, it’s important to note that they are primarily designed for backend usage in WordPress. However, there is no technical restriction preventing you from enqueueing and utilizing Dashicons on the frontend if you wish to do so.

It’s worth mentioning that Dashicons has a smaller icon library compared to other font icon libraries like Font Awesome. While Dashicons provide icons for buttons, post formats, taxonomies, media types, and more within the TinyMCE editor, some users may find them less visually appealing compared to alternatives available in Font Awesome.

However, if you have a limited need for icons and the icons you require are available in Dashicons, you are free to use them on the frontend of your WordPress site.

The Dashicons library provides the necessary HTML and CSS code for each icon. You can find these resources on the WordPress.org website under the Developer Resources section.

Please note that while Dashicons can be utilized on the frontend, it’s important to consider the visual aesthetics and the availability of alternative icon libraries to ensure the best design and user experience for your website. For a comprehensive guide on icon fonts, check out CSS-Tricks’ guide to icon fonts.

Display Dashicons directly in posts and pages

If you want to add icons to post or page 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.

How to Create a Shortcode

To make Dashicons easier to use for your clients you can make shortcode 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>';

    }

} );

Make use of the Dashicon HTML and make modifications with CSS.

There is a fairly straightforward method of incorporating Dashicons into your website without having to write any PHP code. A little HTML and CSS can accomplish the same thing just as easily!

The steps are as follows:

• Navigate to the Dashicon website.
• Choose the icon that you want to use.
• Select the option to “Copy HTML,” and then copy the code for the Icon that appears.
• Copy and paste the code into a Text Editor or Text Widget of your choice to make it work.
• Custom CSS can be used to change the appearance of your icon.

Using FireBug in Firefox or the Inspect Element option in Google Chrome will assist you in locating the CSS element that will allow you to manipulate the CSS code while the icons are displayed by default at 20 pixels.

How to Use Dashicons as Admin Menu Icons

If you want to incorporate Dashicons into your WordPress site’s admin menu to link visitors to your Facebook and Twitter pages, follow these guidelines:

Step 1: Visit the Dashicons page at http://melchoyce.github.io/dashicons/. This page displays all the available Dashicons that can be used with WordPress.

Step 2: Choose the Dashicon you wish to use in the admin dashboard. Click on the icon, and you will see an enlarged view of it along with links to copy the CSS, HTML, and glyph.

Step 3: Click on the “Copy HTML” link. This will copy the HTML code associated with the selected Dashicon. Paste this code into your HTML.

For example, if you want to display social media Dashicons (such as Facebook and Twitter) in the sidebar of your WordPress site, you can add a text widget to the main sidebar area. In the text field of the text widget, paste the HTML code in the following manner:

<a style=”text-decoration:none;” href=”http://twitter.com/YourTwitterId”><div class=”dashicons dashicons-twitter”></div></a> <a style=”text-decoration:none;” href=”http://www.facebook.com/YourFacebookProfile”><div class=”dashicons dashicons-facebook-alt”></div></a>

You can also customize the size of these icons by adjusting their font size in the CSS. Additionally, you have the flexibility to assign different colors to the icons.

I hope you find this tutorial helpful in using Dashicons within your theme or plugin menu. If you have any questions or suggestions regarding this topic, please feel free to share them with us.

F.A.Q

Summary

In conclusion, Dashicons are a versatile resource for enhancing the visual appeal and user experience of your WordPress website. By incorporating these icons using CSS classes, helper functions, or within menus and custom post types, you can easily add intuitive and visually engaging elements to your WordPress site. For more best practices, see the WordPress Design Team updates.