Home / learning / wordpress / Display Genericons Icon Font In WordPress Theme | Vector Icons

Display Genericons Icon Font In WordPress Theme | Vector Icons

Date added: October 14, 2013

Genericons are flexible vector Icon Font for Blog websites, they are available for free. These Icons make your blog look more attractive. Even I am using Genericons for my Blog.

Genericons is the best alternative for Font Awesome which works with bootstrap.

Display Genericons Icon Font in WordPress Theme, Vector Icons

In this tutorial I am going to tell you Way to display Genericons on your WordPress theme blogs. Here I am taking Twenty Twelve Theme as an Example.

Adding Classes To Meta Info

Download function.php file of your WordPress theme.

(Don’t forget to take a backup before editing any file)

In the function.php file you can find the below mentioned code.

This code displays the Author, Category, Tag and Date of the published post.

Since I am using Twenty Twelve theme the code may differ.

We need to add classes for every category to display the Genericons.

Replace the above code with the one below.

Now save and close the function.php file

Adding Genericons CSS To WordPress Theme

Download Genericons Zip file, and Extract them. After extracting you can see a folder named Font. Upload the folder to your Theme.

Path to upload folder:

Add below CSS code to the theme Style Sheet (style.css)

Save and close file. You can modify the Genericons by editing the above CSS code.

Refresh your website, now you can see the icons in all pages.

Genericon Plugin

This plugin add Genericons using HTML or shortcode in WordPress Theme.

Download Genericon plugin

Don’t forget to post your views, if you have any questions let me know through comments.

Click For Post Excerpts For WordPress

About Amar

Leave a Reply

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


7 − = six

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Scroll To Top