14 October 2022
WordPress Dashicons: How to Use Them in WordPress Site
Are you a beginner who wants to learn how to use Dashicons in WordPress?
Dashicons is an icon font (similar to FontAwesome) that comes with every WordPress installation. It’s lightweight and contains just enough icons for most users to avoid installing a third-party icon set.
By default, the Dashicons are only loaded on the backend. However, you can easily add Dashicons to the front end using simple code.
Nowadays, every theme developer prefers to use WP Dashicons over images since icons load faster.
In this guide, we’ll show you how to use Dashicons in WordPress.
What are WordPress Dashicons?
WordPress Dashicons are a collection of over 300 scalable vector icons included in the WordPress core, designed for use in themes, plugins, and custom post types. They are font-based icons, ensuring clarity and scalability without pixelation.
Furthermore, these icons cover various categories like media, social, and formatting, enhancing the visual appeal and usability of WordPress admin interfaces.
You may have noticed that we’ve referred to Dashicons as “font icons” rather than “icons.” This is because there is a difference between font icons and regular icons.
What is The Difference Between Image Icons And Font Icons?
Font icons and image icons serve the same purpose. The only difference is how they are saved on the server.
Image icons are tiny images that you place on various elements of your website. Font icons are pieces of code that your browser converts into a vector image.
Why Use Dashicons?
You should use font icons (Dashicons) instead of image icons for many reasons.
- They are scalable by default, exactly like the text on your WordPress website. That means they’ll look good no matter how big the user’s screen is.
- Dashicons are also lightweight. This means your WordPress website performance will be faster than using image icons.
- Dashicons, because they are text, can be further customized using CSS. You can add effects like shadows, gradient colors, animations, and much more.
- Dashicons are also useful for keeping HTTP requests as low as possible because they load at the same time as other fonts. If you use a lot of images on your site, you’ll have to make a lot of requests to get them, which increases page loading time.
How to Use Dashicons in WordPress?
Don’t worry. Using Dash icons does not require advanced coding skills. Follow the steps below, and you’ll have Dashicons on your WordPress website in no time.
Enabling WordPress Dashicons on Frontend
Before using WP Dashicons, you must first enable them for the theme you’re using. This is done by adding a little code snippet to the functions.php file.
First, you need to go to Appearance » Theme Editor from your WordPress admin dashboard.
Now, look for the functions.php file from the list of files on the right.
Next, scroll down to the bottom of functions.php and add this code:
function enable_frontend_dashicons() {
wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'enable_frontend_dashicons' );
Before editing functions.php, we recommend creating a child theme. If you edit the theme file directly and then update the theme, the update will overwrite any changes you make to functions.php. As a result, having a child theme is always better.
That’s it! You are now ready to start using WP Dashicons. Next, we will show you how to get Dashicons HTML and CSS code.
How to Get Dashicons HTML and CSS Code
WordPress.org has a Dashicon library where you can get CSS and HTML codes for each icon.
Simply go to WordPress Developer Resources Page. Here you’ll see a list of available Dashicons.
Next, click on the icon that you may want to use for your site.
Then, depending on your needs, select Copy HTML or Copy CSS.
Once clicked, a popup window with code will appear. Just copy the code to the clipboard.
Now, as you enable Dashicons and copy the code, all you need to decide is where to use Dashicons icons on your WordPress dashboard. For example, you can use the icon on themes, Metadata, navigation menu, etc.
How to Use WordPress Dashicons for Specific Purposes
You saw how to use Dashicons on your site, and now we’ll show how you can use them for certain purposes.
Adding Dashicons to WordPress Pages and Posts
To add a Dashicons icon to a WordPress page or post, first, copy the HTML code of the icon you want to use.
Following that, you must put the HTML code inside an HTML rendering shortcode. Most page builders use the Custom HTML shortcode or the Custom HTML block if you use the Gutenberg editor. Please keep in mind that for Classic Editor users, this means pasting HTML code into the Text tab of the editor.
Further, you may use the same HTML code inside a Custom HTML widget to add a Dashicons icon to a widget area.
To add the icon, open a page or post and insert a Custom HTML block into it. You can either paste the copied code directly into the block or surround it with HTML code.
After inserting the HTML code, publish the page/post and preview it from the frontend to see the result.
Use WP Dashicons for Navigation Menu
To add a WP Dashicons to a WordPress navigation menu, first, copy the HTML code of the icon you want to use.
After that, return back to your WordPress dashboard and click on Appearance » Menus.
Then, choose the menu you want to edit and click on a menu item to which you want to add the icon.
Next, look for the Navigation Label option under the expanded menu item section. You will need to paste the HTML code directly inside that area. You can insert the code either before or after the label of an existing menu item. After you’ve added the HTML code, click the Save Menu button to save your changes.
Then, visit your website’s frontend to see how your chosen icon displays.
Add Dashicons in Admin Menu
To add a custom post type to your WordPress website, first, use the register_post_type() function to register it. This function accepts several parameters, one of which is the menu_icon. It lets you choose which icon appears next to the admin dashboard’s custom post type menu option.
To use Dashicons, set the menu_icon parameter to the complete name of the icon when calling the register_post_type() function (e.g., dashicons-format-video).
For example, we registered a custom post type named movie with a menu section with the dashicons-format-video icon next to it.
We registered the movie post type using the wp_cpt() function, which is connected to the init action hook in this small code snippet.
Now visit your WordPress dashboard and see how the code we used turned out.
Using a Custom Created Dashicons Shortcode
You can quickly add Dashicons to your website by using a shortcode. That’s a great solution if you’re creating a website for someone else and want to ensure that the website owner can easily insert the desired icons on their site without having to mess with HTML.
Here is the code you need to add to the functions.php file in order to use shortcode Dashicons:
You may then use a shortcode like this on posts and pages:
Keep in mind that the Dashicons stylesheet must be loaded on your website’s front end for the shortcode to work.
Please backup your website before editing the functions.php file. That way, if something goes wrong, you may easily recover your website.
Conclusion
In this guide, we’ll explain what WordPress Dashicons are and how to use them in WordPress. We also covered the many ways to add Dashicons to a WordPress website. Whether you’d like to add them to your site’s frontend or backend, there are several options to choose from.
While you can look for WordPress plugins or themes that allow you to add Dashicons and custom functionality, you can use these guidelines to add them completely on your own. With the information we covered, you should be able to do it yourself by just following the steps we described.
Read More Useful Articles
