How to use WordPress icon on a Plugin

When you are using the WordPress structure to build your plugin from time to time you will need to insert an icon to make your plugin easier on the eye.

A little while ago a few developers and designers found out that using images to display simple Icons was a bad idea, because of the way it scales in to Mobile and the lack of methods to change it's color. These guys found out that the best way was to use .svg files, which are a vector with the drawing instead of a bitmap.

Using the idea of .svg files someone improved upon this and created a font map to easily use each one of a bunch of symbols that they wanted to use.

Dashicons

The MP6 a plugin project that was created to take over the administration and provide users with better mobile experience and a better looking wp-admin. That project was merged in to the Core of WordPress version 3.8.

On the MP6 the development team decided to use fonts to create the menu icons to allow better mobile experience.

WordPress Administration Icons

These pack of icons were called Dashicons, it's an on going project and people can still request and discuss new icons for WordPress.

With the new Resources inside of WordPress.org we now have a very cohesive page that display how to use every single one of them on you WordPress administration.

How to use on The front-end

Using the wp_enqueue_style we will add the Dashicon CSS file to the queue on our theme.

function bord_enqueue_dashicons(){
    wp_enqueue_style( 'dashicons' );
}

add_action( 'wp_enqueue_scripts', 'bord_enqueue_dashicons' );

Simple as that and your theme will have support for the reference used on the resources page.

Did I forgot about anything?

If you liked this article don't forget to share with your friends and please comment below if you thing I'm wrong in anyway so that we can talk about it.

Discussions — No responses yet

Leave a Reply