How to add Dashicons in WordPress Theme or Plugin

Dashicons is the official icon font of the WordPress admin as of 3.8. TheĀ icon font is licensed under GPLv2.

Dashicons are already included in WordPress 3.8. It’s easy to add them to your Plugin or Theme: all you need to do is add HTML. If you need, you can add custom CSS to style the icon font.

If you want to use them in the front end, you will need to enqueue them using PHP code in your Theme functions.php file:

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

How to add Dashicons in WordPress Theme or Plugin: Html Usage

To add Dashicons go to the official Dashicons Homepage and click the icon you want to use. Then click the “Copy HTML” link at the top of the page and copy the HTML code for the icon you want to use.
How-add-Dashicons-to-WordPress

Paste the HTML into your editor or text widget. For example:

<span class="dashicons dashicons-admin-users"></span>

How to add Dashicons in WordPress Theme or Plugin: Css Usage

You can add the icons using the :before selector. Click the “Copy CSS” link at the top of the page and copy the Css code for the icon you want to use. You get a CSS code like this (user icon):

content: "\f110";

Then paste in your CSS :before selector:

.myicon:before {
 content: "\f110";
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 font: normal 20px/1 'dashicons';
 vertical-align: top;
 }