Using Dashicons To Style Unordered Lists

There’s 2 steps to replacing your unordered lists with dashicons.

You need to:

1. Register dashicons for use in the front end.
2. Add some CSS to your child themes style sheet.

Register Dashicons

Simply copy this PHP code from the view raw link in the Gist and paste it at the end of your child themes functions.php file.

Here’s an example of what your lists can look like after adding the star dashicon to your ul list type.

And here’s the CSS code.

If you want to use another icon, simply go to the Dashicons site and click the icon you want to use.

Then you can click the Copy CSS link near the top of the site to get the number of the icon which needs replacing in the CSS code.

Here’s the line of code which changes the icon type.

content: "\f147";

Here’s more on the topic of using Dashicons in WordPress.