TechwithAbhijeet

What is WordPress Dashicons and how to use WordPress Dashicons?

LearningPanda

Confused about what icon font to use on your WordPress theme? Do you know that WordPress has an embedded icon font ‘Dashicon,’ and can you directly use WordPress dashicons on your custom post types and frontend?

In this article, we introduce you to WordPress Dashicons icon font and how you should use them in WordPress development.

So let’s dive in. 

What is Dashicons?

Dashicons is a flat, icon-font setup introduced in wordpress 3.8 in 2013 as official icon font for WordPress.Dashicons are created by the WordPress core development team and included by default since WordPress uses it on admin pages and other backend codes.

Dashicons were initially brought into Core as part of the MP6 project that redesigned the entire WordPress admin. Dashicons currently has more than ~315 icons. These icons have been used widely by plugins for many years.

Dashicon Icons

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

How to use Dashicons?

Dashicons are mostly used on the back end by wordpress themes, so if you are creating your custom post types and want to add dashicon icons, you can do that. 

Using Dashicons in frontend

If you want to use them on the frontend, let me tell you, that dashicons are generally not intended for frontend. But there is nothing that stops you from using them on your frontend; you can enqueue them to use dashicons on the front end.

The only issue using them on the front end is that the icon library is much smaller than other font icon libraries like Font Awesome. For example, there are icons for buttons in the TinyMCE editor, post formats, taxonomies, and media types. But these icons don’t look that good, and Font Awesome alternate for the button is way better.

 But if you don’t need many icons and your icons are available in dashicons, go ahead and use them.

Dashicons library allows you to find HTML and CSS code for every icon. Once you are on WordPress.org, look for Developer Resources.

Then follow these steps:

First, click on any icon that you like. I have taken the bell icon as an example and will be using it.

On the next screen, you should see your icon and options to copy CSS/HTML for using that as an icon. Click on Copy HTML link.

A popup window with code will appear. Copy this code to the clipboard by pressing CTRL + C.

Do you see some code in popup? It is the HTML code for using the dashicon. Now, let’s add it to our posts. For adding it to post, simply use the embed option while writing a post and put your dashicon icon’s HTML in it.

Now hen you publish your post, you will see your icon in the post.

With similar steps, you can embed dashicon icons anywhere on your frontend. If you need to add a dashicon icon on menu icons, just put  HTML code for the dashicon icon in your edit menu section.

Using Dashicons on custom post types and Menu pages

So if you are creating your custom post type in wordpress and want to use wordpress dashicon icons, You can add wordpress dashicons with Admin menu items. For this you can use  register_post_type() and add_menu_page().

Here is how ‘register_post_type’ function API from wordpress documentation looks like.

register_post_type( string $post_type, array|string $args = array() )

$args is Array or string of arguments for registering a post type, so if while creating your custom type, Pass the name of a Dashicons helper class to use as font icon for ‘menu_icon.’

// Our custom post type function
function create_posttype() {
 
    register_post_type( 'movies',
    
        array(
            'labels' => array(
                'name' => __( 'Movies' ),
                'singular_name' => __( 'Movie' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'movies'),
 'menu_icon' => 'dashicons-admin-post',
 
            'show_in_rest' => true,
 
        )
    );
}

add_action( 'init', 'create_posttype' );

We have registered our custom post type with this code, and this custom post type will use the dashicon icon.

If you’re Adding a Menu Page, add the use function add_menu_page() to pass dashicon name as argument. The function add_menu_page() accepts a parameter after the callback function for an icon URL, allowing a dashicons class. 

So pass the name of the Dashicon as the icon_url argument. Here is how your code should look like

function wpdocs_add_my_custom_menu() {
    // Add an item to the menu.
    add_menu_page(
        __( 'My Page', 'textdomain' ),
        __( 'My Title', 'textdomain' ),
        'manage_options',
        'my-page',
        'my_admin_page_function',
        'dashicons-admin-media'
    );

Dashicons doesn’t have any cool shortcodes with it out of the box, but you can customize the size of your icons with CSS

Dashicons format 

Dashicon currently uses WOFF2 (Web Open Font Format 2) format. WOFF2 is a replacement for the original WOFF 1.0 format with a better compression algorithm, which results in lower network consumption.WOFF2 Format is supported by all modern browsers but is not supported in Internet Explorer.

As before update till wordpress 5.2 dashicons used to use WOFF1.0 format, so WOFF1.0 is still in WordPress Core to ensure backward compatibility for plugins and themes.

If you wish to use the new Dashicons and require the WOFF 1.0 format for IE support, you recommend using the dashicons.css file included in the core to define the Dashicons font face.

Dashicons update in WordPress 5.5 (the final update)

In the final Dashicons update is included in the 5.5 release, 71 new icons were added to the dashicon. Though this wordpress still maintains the WOFF1.0 format file for backward compatibility, these new icons will not be added in the WOFF1,0 file.

So if you want to use these new icons, your only option is to use the dWOFF2.0 file.

As ii it is the final update for Dashicons, there will be no more updates to dashicons, so no more new icons will be added.

 If you are worried that your dashicon code will stop working, it will not happen soon, as Dashicons icons will still be bundled in WordPress core in a future release. So no need to worry about it. 

Dashicons alternatives

As Dashicons has limited number of icons available, you can explore these other icon fonts.

Conclusion

So if you are searching for icons for your WordPress blogs, Dashicons is a good option. Specifically, suppose you are developing a theme or doing some back-end development, as you don’t need to use any external font icon library. In that case, your design will be consistent with the rest of the Admin dashboard.

Dashicons are great but they have a comparatively limited icon set, which is a constraint as there are very few options to chose from.

So our recommendation for using a dashicon is to stick with the dashicon for back-end and use some other library like font-awesome for fronted.  

Exit mobile version