Dashicons were introduced in WordPress 3.8. These are official icons on WordPress. Dashicons are already included in the WordPress admin. It’s easy to add them to your Plugin or Theme. This can be done simply by adding HTML code. If you need, you can add custom CSS to style the icon font. We can find the list of icons and it’s documentation at Developer Resources: Dashicons.
So, how do we use them in our theme or plugin? The answer is simple. For the frontend, first of all, we must enqueue them if they are not already registered. Then, we can write code snippets to display custom icons.
Enqueue Dashicons
Simply enqueue the style using the below code in your functions.php file. This will load `dashicons.min.css` file in your webpage. You can confirm the import by viewing your source code on browser.
Use Icons on Page
After successful import, we can directly use on our webpage. When we click on one of the icon at its official page, we see “Copy CSS”, “Copy HTML” and “Copy Glyph”. We can use any one the three. In the example below, we will use html. Simply put the span tag with desired class in anywhere where you want to display the icons.
<span class="dashicons dashicons-heart"></span>
