Dashicons is the icon font used officially in WordPress admin. What’s great about it is that you can add some visual cues on your website without bloating it up. Visuals like images increase load times and don’t scale well, while SVGs require you to read up a bit to actually put it to use Today we’re going to show you how you can get these font icons installed on your WordPress project.

An example of how it looks like.

Step 1: Enqueuing the script

To get your WordPress site ready, you’ll need to open up your child theme’s functions.php file and insert the following lines of code at the end.

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
}

Step 2: Using dashicons

Head over to the this site and pick an icon that you’d like to use. Click on ‘Copy HTML’ and use that snippet of code and paste it into your HTML, and with that you are done! Simple isn’t it.

Copy the code and insert it into your HTML.

Extra Step: CSS Method

Instead of inserting it via HTML, you can also insert dashicons using CSS.  Return to this site and pick an icon. This time, click ‘Copy CSS’ and insert that code into your own CSS file. Make sure to paste the code in the CSS before:selector.

Here’s a sample code of how this will look like:

.web-link:before {
font-family: "dashicons";
content: "\f319";
}

And with that, you are now on the road to using WordPress dashicons! Do you use Dashicons or do you prefer SVGs? Let us know which method you use and why down in the comments below.