Search

How to Use Dashicons in your WordPress or Genesis Theme

Listen to this article

Do you use icons on your site? Aren’t they great to highlight sections on a page? I like using icons. And by icons, I mean icon fonts, and not images as icons. There is a difference, and most choose sides, because there isn’t a better option (icon fonts are better). But let’s list some facts.

[space]

The Difference Between Icons and Images

An Icon Font is similar to any other font, except that instead of alphabets, you have vector symbols. (Okay so not the most technical definition, but you get the point right? 😀 )

dashicons-icon-font

So basically you can use the font, to add symbols which look like images, on your site. However, it is a font and not an image. And what does that mean to us?

  1. Scalable: The fact that it is a font, means that the symbol is easily scalable, just like text on your site.
  2. Change Color using CSS: You can set the color of the icon font using CSS ‘color’ property. You can add additional properties like shadow, or gradient color as well.
  3. Lightweight: As compared to images, fonts are lightweight, which means they will not affect your page size.
  4. Additional HTTP requests are saved: If you have several images on your page, you’ll end up making several requests, to fetch these images, which could end up increasing your page load time. Instead, you could just load the fonts at once, and then use them across the page.

Of course there are certain limitations:

  1. With icon fonts you have the choice of only a single color. If that works for you, all’s well, else you’ll need a different solution.
  2. Since a single icon is part of the entire font library, adding a single icon on a page, forces the entire font to be loaded, which is an overhead.

Okay, so that’s settled. The advantages outweigh the disadvantages, but it would be immature to pick sides (but icon fonts are better than images).

A major advantage of choosing icon fonts, is that WordPress has a readily available set you can use. This is not a newly available feature. It’s been around since WordPress 3.8. What I’ve just realised, is that I’ve begun using this font quite often, and think it’s pretty convenient when a few icons are needed. In fact, I can now add this font in my Genesis theme as well.

Read on.

[space]

Dashicons in WordPress and Genesis

Since 3.8, WordPress has an icon font included- Dashicons (icons in your dashboard). This is a font that you must’ve noticed in your admin dashboard. The WordPress Twenty Fourteen theme, added these icons in the frontend as well.

You can now add these fonts to any theme, even on Genesis, using the below steps:

Enqueue the font

The first step, is to enqueue the font, so that the icons are rendered correctly. So add the below code in your Genesis child theme:

<?php
// enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'wdm_enqueue_dashicons' );
function wdm_enqueue_dashicons() {
     wp_enqueue_style( 'wdm-dashicons-font', get_stylesheet_directory_uri(), array('dashicons'), '1.0' );
}

A tip here, is to enqueue the style only when necessary, to reduce page load time.

Get the Icon Code

Next, you would need to know the code of the icon to display it. For this, head over to WordPress Developer Resources: Dashicons. For every icon, there is a code listed below. You need the code to display the icon.

plugin-icon-dashicon

Write some CSS

To display a particular icon next to a piece of text, or for a span element, use the below CSS code:

.wdm-plugin-icon:before {
    content: "\f106"; /* plugin */
}

Add additional CSS, like color, shadow and so on. And done!

[space]

The fonts are unique, as specific to WordPress, (yayy!), but are limited. However, there are still a good option to use, in case you need few fonts on a page. Do let me know your thoughts, and your opinions about the same. Cheers!

Aruna Vadlamani

Aruna Vadlamani

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads