Genericons might seem to be a new term to many, and that’s why let’s first discuss what is a Genericon? Genericons are new icon fonts which are designed with simplicity in mind so that they can be used in wide variety of projects.
These Genericons are basically vector icons embedded in a webfont. You can change icon colors on the fly, or even apply CSS effects such as drop-shadows, change size, color, opacity, outline, gradients, etc.
There are two ways to add/integrate Genericons to WordPress and in this tutorial, we’ll be taking a look at both the methods.
1. Adding Genericons the Manual Way
Download the Genericons font from here. Now, copy the font folder and the genericons.css file into your project. If you’re trying this on a live site, then upload it to your theme folder and then link the CSS in your HTML by using this code.
<link href="path/to/genericons.css" rel="stylesheet">
You can now change icon color and apply many effects to your icons. For example;
Change color of every icon:
.genericon {
color: #1c7fd7;
}
Change color of only Twitter icon:
.genericon-twitter {
color: #1c7fd7;
}
You can add many other types of CSS effects. Here’s a preview of how it will look like in front-end.
While the above method works great, it involves some CSS knowledge, and may not be suitable for all. That’s why let’s head over to the second method.
2. Adding Genericons by Using a Plugin
The plugin method is perfect for those who want an easy method to integrate Genericons. Download, install and activate the Genericon’d plugin. After activating, you can instantly start inserting icons either by HTML or by using shortcode inside your posts, pages and text widgets.
To know which shortcode or HTML to use, go to Appearance > Genericon’d. You can find detailed instructions on the usage of Genericons on this page, with examples.
To insert Twitter icon, add this shortcode anywhere:
[genericon icon=twitter]
Just replace the icon name with the icon that you want to insert. For example; to insert star icon, use this shortcode: [genericon icon=star]
Alternatively, you can also use this HTML:
<div alt="f202" class="genericon genericon-twitter"></div>
Just in case if you haven’t noticed, these Genericons are also integrated to the new default WordPress theme – Twenty Thirteen which is currently under development.
So that’s it. Try it out on your WordPress site.
Leave a Reply