What Are Dashicons and How To Use Them In WordPress9 min read

What Are Dashicons and How To Use Them In WordPress

Dashicons are a built-in core set of font icons in WordPress that were introduced back in WordPress 3.8 when they did the massive backend UI redesign. By default, they are used for the various links on the left-hand admin bar, and they can be customized to suit your needs.

They can be used in your own Custom plugins and themes, not only when defining new post types or creating custom admin panels, but also on the front-end theme design if you so desire. While these icons were created for core, they can be used in any custom plugin or theme you create. The best part is that it is extremely simple!

You can use these icons on:

Difference between image icons and icon fonts?

What Are Dashicons and How To Use Them In WordPress

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.

What are the benefits of using Dashicons ?

  • Texts used on your website, which are fonts, are scalable in the same way.
  • When compared to images, text is a lightweight option that has no impact on page loading speed.
  • Capable of changing the color of the icon using CSS and adding additional properties such as gradient color, shadow, and so on.
  • The ability to load fonts in bulk, which can then be used across multiple pages, is extremely useful for reducing the number of HTTP requests. If you have a lot of images on your site, you will have to make a lot of requests to get them, which will increase the time it takes for the page to load.
  • Images are more difficult to use and adjust. You can add easily recognizable and creative symbols without having to recreate them every time you need an icon for a video player, email, music, or any other purpose on your computer.
  • Because they are integrated into WordPress, they provide greater accessibility.

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 useDashicons, 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 Are Dashicons and How To Use Them In WordPress
What Are Dashicons and How To Use Them In WordPress

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 want to use them on the frontend, I should warn you that dashicons are not typically intended for use on the frontend. While they cannot be used on the front end, there is nothing preventing you from enqueuing them and using dashicons on the front end.

There is only one drawback to using them on the front end: the icon library is significantly smaller than other font icon libraries, such as Font Awesome. In the TinyMCE editor, there are icons for the buttons, post formats, taxonomies, and media types, to name a few examples. However, these icons do not appear to be very attractive, and the Font Awesome alternate for the button is significantly more appealing.

However, if you don’t require a large number of icons and your icons are available in dashicons, feel free to use them.

The Dashicons library makes it possible to find the HTML and CSS code for each icon. Once you have arrived at WordPress.org, look for the Developer Resources section of the site.

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.

Use Dashicons as Admin Menu Icon

Dashicons page is having so many icons. If you want to show Facebook, Twitter dashicons in your WordPress site linking the visitors to your Facebook & Twitter pages, then follow the guidelines as below :

Step 1: Go to http://melchoyce.github.io/dashicons/. Here you will see all the dash icons that can be used with WordPress.

Step 2: Click on the dash icon you would like to see in the admin dashboard. On the top of this page, you will see an enlarged view of this dash icon & the links to copy CSS, HTML & glyph.

Step 3: Click on the Copy HTML link. Copy the content shown in its window & paste it in your HTML.

e.g. If you want to display these social media dash icons in the sidebar of my Worpress site, I will add a text widget to the main sidebar area. In the text field of the Text widget, I will paste the HTML link 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 change the size of these icons by customizing their font size in the CSS. You can assign different colors as well.

I hope you find this tutorial helpful. Now you can easily Use Dashicons in Theme’s or Plugin’s Menu. If you have any queries or suggestions regarding the same, do share with us.

Rate this post

Leave a Reply