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.
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? 😀 )
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?
- Scalable: The fact that it is a font, means that the symbol is easily scalable, just like text on your site.
- 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.
- Lightweight: As compared to images, fonts are lightweight, which means they will not affect your page size.
- 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:
- 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.
- 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.
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.
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!
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!
Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!
Leave a Reply