Using ClassicPress Icons in Plugins and Themes

There are more than 230 built-in ClassicPress icons that can be used by plugin and theme developers without loading external libraries. The icons can be resized with zero loss of quality and they can be completely restyled with CSS. What’s not to love? The built-in icons are not as robust as other font-icon collections, but, they are worth taking a look.

How to Use ClassicPress Icons

Step 1: Create the Containers

Creat two empty containers, one nested inside the other. The inner-most container should be given a base class of either dashicons or dashicons-before. Add another class to the inner container in the form dashicons-slug, where slug is replaced with the slug of the particular icon you want to display. For example, to display a lock icon, you would use:

<span>
	<span class="dashicons dashicons-lock"></span> Some Text
</span>

<!-- [or] -->

<span>
	<span class="dashicons-before dashicons-lock"></span> Some Text
</span>

Step 2: Add the CSS

Want to style the size and colors of your icons? Add any custom rules to your theme’s style.css file. The `font-size` rule changes the size of the icon. Here’s an example of changing the size and colors.

.dashicons {
	text-align: center;
	padding-top: 10px;
	font-size: 60px;
	width: 125px;
	height: 75px;
	color: #06c;
	}
.dashicons:hover {
	color: #0c6;
	}

Where to Use ClassicPress Icons

You can use the ClassicPress icons virtually anywhere. You can use them in your plugin and theme options menus to match the core style, you can use them on your admin pages to make your headers look great – you can even use them in posts! By default, they are only loaded on the back-end, so if you decide to use them on the front-end, you’ll have to enqueue the style sheet, as shown below. Note that you should change prefix to meet your needs.

/*
Keep in mind the following loads the Dashicons style sheet on every page.
*/
add_action('wp_enqueue_scripts', 'prefix_load_dashicons_front_end');
function prefix_load_dashicons_front_end() {
	wp_enqueue_style('dashicons');
}

ClassicPress Icons and Slug Names

There are also a few more examples here.

Wrapping Up

ClassicPress has a set of core icons that can be used in situations where you prefer not to load external icon sets. While the available icons aren’t as robust as the more popular font-icon libraries, they often work well when you’re in a hurry, don’t want to make external calls, or just need to create quick mockups. They may not suffice for every situation, but, they are worth examining and having an understanding of how they work.

What do you think?

Do you ever use the icons built into ClassicPress? Are they just too limiting to bother? What icon library would you add to ClassicPress core if it were up to you? I’d love to hear what you think – let me know in the comments!