How to Use and Display Dashicons in WordPress

Tony Mark

2 years ago

If you’re a WordPress user, you’ve probably come across dashicons. Dashicons are a set of icons that are built into WordPress, and can be used to add visual elements to your site. In this article, we’ll take a closer look at what dashicons are, how to use them, and how to display them on your WordPress site.

What are WordPress Dashicons?

Dashicons are a set of icons that are built into WordPress. They are vector-based, which means that they can be resized without losing any quality. Dashicons are a popular choice for adding visual elements to your WordPress site because they are lightweight and don’t require any additional resources to load.

Enabling Dashicons on WordPress Site

The first step to using Dashicons on your WordPress website is to enable them. By default, the Dashicons library is available in your WordPress admin dashboard. However, you must enable it manually if you want to add icons to your theme.

Accessing WordPress Theme File Editor from the Admin Dashboard

To enable Dashicons on your WordPress site, you need to edit your theme’s functions.php file. Here are the steps:

Log in to your WordPress admin area.
Click on Appearance > Theme File Editor.
Select the functions.php file from the list of files on the right-hand side.

Editing the Functions File using the Theme File Editor

Once you have selected the functions.php file, scroll down to the bottom of the file, and add the following code snippet:

add_action( ‘wp_enqueue_scripts’, ‘load_dashicons_front_end’ );
function load_dashicons_front_end() {
wp_enqueue_style( ‘dashicons’ );
}

Adding the Code Snippet to Enable Dashicons

This code snippet will enqueue the dash icons style to your website’s front end, enabling you to use them. Once you have added the code, select “Update File.”

Updating the File

The last step is to update the functions.php file. You can now use Dashicons on the front end of your WordPress site. However, to prevent future theme updates from reverting the changes, make sure to add the code to your child theme.

Finding Dashicon HTML and CSS Codes

here are the steps to find the Dashicon HTML and CSS codes:

Visit the Dashicons WordPress website – https://developer.wordpress.org/resource/dashicons/.
Browse through the available icons to find the one you want to use.
Once you’ve found the icon, click on it to open its page.
On the icon’s page, you’ll see the HTML and CSS codes for the icon.
Copy the HTML and CSS codes and paste them into the desired location in your post, page, or theme.

It’s important to note that when using Dashicons in your theme, you’ll need to enqueue the Dashicons stylesheet in your theme’s functions.php file using the following code:

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

How to Use Dashicons in WordPress Posts

Using dashicons in WordPress is quite simple. To add a dashicon to your content, you can use the following shortcode:

<i class=”dashicons dashicons-{icon-name}”></i>

Replace {icon-name} with the name of the icon you want to use. For example, if you want to use the “dashicons-admin-home” icon, you would use the following shortcode:

<i class=”dashicons dashicons-admin-home”></i>

You can use the shortcode anywhere in your content where HTML is allowed. This includes posts, pages, widgets, and custom post types.

How to Display Dashicons in WordPress

By default, WordPress does not load the dashicon font on the front end of your site. This means that if you use a dashicon in your content, it may not display correctly for your visitors.

To fix this issue, you can use the following code to enqueue the dashicons font on the front end of your site:

add_action( ‘wp_enqueue_scripts’, ‘load_dashicons_front_end’ );
function load_dashicons_front_end() {
wp_enqueue_style( ‘dashicons’ );
}

Simply add this code to your theme’s functions.php file, and the dashicons font will be loaded on the front end of your site.

Using Dashicons in the WordPress Dashboard

Dashicons are also used in the WordPress dashboard. They are used to add visual elements to the WordPress admin menu, as well as to the various screens and pages in the WordPress dashboard.

If you’re a plugin or theme developer, you can also use dashicons in your own custom admin screens and pages. To add a dashicon to your custom admin screen, you can use the following shortcode:

Replace {icon-name} with the name of the icon you want to use.

Customizing Dashicons

If you want to customize the appearance of dashicons on your WordPress site, you can use CSS. Dashicons are simply a font, so you can use standard CSS techniques to change the color, size, and other properties of the icons.

Here’s an example of how to change the color of a dashicon:

.dashicons {
color: #ff0000;
}

Conclusion

Dashicons are a simple and lightweight way to add visual elements to your WordPress site. By following the steps outlined in this article, you can easily use and display dashicons on your site. Whether you’re a beginner or an experienced WordPress user, dashicons are a great tool to have in your toolkit.

Author
Recent Posts

Tony Mark