They have the power to communicate quickly with the audience by establishing a strong visual connection. This is why icons are used extensively everywhere, including WordPress websites. Also, using the same theme on your site for several months can be boring. It’s common. And then, you will be in search of something more interesting, using that, and get bored again, And the cycle goes on and on… So, how can you skip that cycle of boredom? Dashicons are an excellent way! It can spice up the aesthetics of your site and help you stand out. It will also save you from putting on extra efforts and crowding your site with unnecessary images that slow down the page speed. So, let’s explore Dashicons and how you can use them effectively on your WordPress website.
What’s WordPress Dashicons?
Dashicons are WordPress’ official icon fonts introduced years ago with its version 3.8. These fonts are cool and awesome to look at if you use it on your website. They are top-quality SVG files that you can scale easily to any size with no pixelization. As they possess native WordPress support because of being created by their team itself, you can use them directly without loading additional scripts. There are around 350 icon fonts included, which you can find inside the official WordPress Developers Resources. They have categorized these icons based on the topic, plus you could see a dynamic search field that allows you to filter available icons. 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
Do you notice I’m saying “icons” repeatedly? Here, I mean just icon fonts. Not images in the form of icons. Yes, there’s a difference between the two. Let’s unravel that.
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. Did that get too technical? Let me clarify that. Basically, these icon fonts resemble images that you can use to add symbols on your website, but not an actual image. They provide a lot of benefits to you. How? Figure out in the next section.
Why should you use them?
Scalable like texts used on your website as they are fonts Lightweight which does not affect your page loading speed as compared to images Capable of setting the icon color through CSS and adding extra properties such as gradient color, shadow, etc. Great at saving too many HTTP requests by allowing you to load fonts all at once, which you can use across your pages. If you use lots of images on the site, you will have to make lots of requests to fetch them, which increases page loading time. Easy to use and adjust than images. You can add recognizable and creative symbols with no need to recreate them every time you need an icon for a video player, email, music, or any other thing. Greater accessibility because they are built right into WordPress
How to use them?
Using Dashicons is no rocket engineering. Trust me; I am familiar with both :0 Just follow some steps mentioned below to get started with WordPress Dashicons.
Step 1: Enable Dashicons on your WordPress site
Before you begin, enable Dashicons where you need to, for example, a theme. For this, you need to add a few codes to the function.php file. To do it:
First, go to the Theme/Appearance Editor from your WordPress Dashboard. Open the function.php file. Scroll till the end of the file and add a few lines of code to enqueue scripts
The above example is to enable Dashicons on the frontend. Make sure you create a child theme before editing the functions.php file. It’s because if you directly edit the theme file and then an update comes for that theme, then it will override all the changes you make to the file.
Step 2: Find Dashicon HTML & CSS codes
Wordpress.org offers a library of Dashicons, which helps you find CSS and HTML codes belonging to each icon. Here, go to Developer Resources to find the Dashicons you want to use and then:
Click on the icon of your wish. Choose between “Copy CSS” or “Copy HTML” by clicking on it. Now, you will see a pop-up window. Just copy the code to the clipboard. Decide where you want to use the icon, such as themes, Metadata, navigation menu, etc. Paste the copied code into the chosen place’s Text Widget or Text Editor. Modify icon looks using custom CSS
That’s it. Besides, by default, all the icons are sized 20 pixels. You can change it using the CSS elements from options such as Google Chrome’s Inspect Element or Firefox’s FireBug.
How to make the most out of WordPress Dashicons?
You saw how you could use Dashicons on your site, and now we will see its usage for specific purposes.
1. Using the navigation menu
To add icons to the menu, follow the steps below:
Go to Menus/Appearance from the dashboard Copy HTML codes designed for menu icon from Wordpress.org Paste it on the “Navigation Label” on the dashboard Click on the “save” button and then load the home page. It should display the cool and crisp icon.
2. Using on post meta
You will be able to use Dashicons just in front of a date, author’s name, tag, or category based on the theme plus data it displays. As you have enqueued Dashicons already, open the style.css file. Otherwise, you can also go for a Custom CSS editor, which does not let you lose your changes after theme updates. Next, add your CSS code after finding a matching selector.
3. On the WordPress backend
If you want different icons included for different custom post titles, post types, or widgets, it’s easy to do.
A quick tip: Create a shortcode
To use Dashicons easily, you can create a shortcode for it. It is useful, especially when you make a website for your clients who would find it easy to insert Dashicons without messing around with the codes.
Conclusion
I hope things are pretty clear on your side regarding WordPress Dashicons. They not only cover the aesthetics of your website but are also easy to use and improve the page loading speed. And you know, ‘beauty and brains’ is a rare combination. So, hurry, use those eye-catching Dashicons on your WordPress site!
