How to use Dashicons in your WordPress website

Dashicons is an icon font (like FontAwesome) that comes bundled with every WordPress install. It’s lightweight and includes just enough icons for most users, that you could avoid installing a 3rd-party icon set.

Just one problem: by default, the Dashicons CSS file only loads on the back-end of WordPress. So it takes a bit of code to use Dashicons in your front-end posts and pages.

Here’s how to load Dashicons on the front-end

Enqueue Dashicons on the Front-end

To use Dashicons, we need to tell WordPress to add it to the list of ‘Enqueued’ scripts, which is the list of all your CSS and JS files that get loaded on a page.

Here’s the code:

// Enqueue Dashicons to load on the front-end

add_action( 'wp_enqueue_scripts', 'dashicons_front_end' );

function dashicons_front_end() {

   wp_enqueue_style( 'dashicons' );

}Code language: JavaScript (javascript)

Where to put the PHP Code

There are two good places to place this code:

  1. Your theme’s functions.php file
  2. The code snippets plugin

Add it to the functions.php file

Select the functions.php file in theme editor
  • Go to Appearance > Theme Editor
  • Select your theme (or child-theme if you’re using one)
  • Choose the functions.php file
  • paste the code

Add it to the Code Snippets plugin

Get the Code Snippets Plugin (free)

If you don’t mind adding an extra plugin, this is my preferred approach. Putting PHP code in the code snippets plugin (rather than your theme) has several advantages.

Advantages of the code snippets plugin:

  1. If you change themes, the code won’t break
  2. Helps avoid the ‘white screen of death’ if the code has an error
  3. Store each snippet separately (better organization)

How to add dashicons with Code Snippets:

  1. From the dashboard go to Snippets > Add New
  2. Give your snippet a title and paste the PHP code
  3. Choose ‘only run on front end’ (optimal) or ‘run snippet everywhere’
  4. Click ‘Activate’
Add a new code snippet
Add a new snippet
Enqueue Dashicons (front end) with Code Snippets plugin

How to use Dashicons on your site

Once you’ve confirmed the Dashicons script is loading on the front-end, there are two methods actually use the icons in your content or theme.

Usage Basics

Here’s how to display dashicons in your site:

  1. Use the .dashicon class with a span element
  2. Use the .dashicon-before class with any html element
  3. Embed it in a CSS pseudo-element (:before or :after)

We’ll look at all 3 options

Use Dashicons with the <SPAN> tag

This is the easiest method and requires minimal CSS. From the Dashicons page, just click the Copy HTML button, and copy the code in the popup window, which will be wrapped in span tags.

Copy the HTML code for Dashicons

You can them embed this code anywhere on your site. You can stick in an <html> block in the gutenberg editor, or even put it in your menu to add an icon to a menu-item.

Dashicon icon in WordPress menu

Use the .dashicons-before class

You can automatically place a dashicon to the left of any element in its own pseudo-element by using the .dashicons-before class.

Here’s how it works:

  1. Create a block in the block editor (e.g. an H2 heading)
  2. Add the .dashicons-before class
  3. Add the class of the dashicon you want to use (e.g. dashicons-arrow-right-alt). Add the class in the block settings sidebar on the right, under advanced > Additional CSS classes
dashicons-before class in block editor

WordPress will automatically insert the icon to the left of your block.

example:

Heading with icon

Use Custom Pseudo-Elements with Dashicons (advanced)

I mostly use icons inside of pseudo-elements. It requires CSS knowledge, but it’s the most flexible option to create custom designs using dashicons. Here’s how it works.

1. Give your block or element a custom class

In this case, I’ll create a list block and give it the class .dashicons-pros-list

2. Create your pseudo-element via CSS.

I want to use the a dashicon as the bullet for each list item, so I’ll need to create a :before pseudo-element for each <li> list item.

/* this is all it takes to create a pseudo-element out of thin air */

ul.dashicons-pros-list li:before {

    content: "";  

}Code language: CSS (css)

3. Add the Dashicon Glyph and Font-family

From the Dashicons page, click the ‘Copy CSS’ link to get the unicode glyph for the icon you want to use. Paste it in-between the quotes in the content property. We’ll also set the font-family to ‘Dashicons’

ul.dashicons-pros-list li:before {

    content: "\f15e";
    font-family: 'Dashicons';
      
}Code language: CSS (css)

4. Add additional styling

I need to remove the default bullet, change the icon color and add a bit of spacing between my list-item and the icon.

ul.dashicons-pros-list li:before {

    content: "\f15e";
    font-family: 'Dashicons';
    color: #50c77a;
    padding-right: 6px;
      
}

ul.dashicons-pros-list {
    list-style-type: none;
}

Code language: CSS (css)

And Voila! Here’s my icon list. Now any time I want to make a checkmark list, I can just add the .dashicons-pros-list to any list block.

Dashicons List Example:

  • List item 1
  • List item 2
  • List item 3

Dashicons Quirks

WordPress never really intended Dashicons to be used on the front end, so you may need to override the default styles to get the effect you want.

For example, by default the font-size of Dashicons is always set to 20px, and it won’t automatically inherit the size of the element you attach it to.

You can of course override this with CSS. Or you could opt for a more versatile icon font like Font Awesome.

Leave a Comment