Web is getting faster and attention span time of users getting shorter, So its very essential to match up to the expectation of your readers in terms of content as well as design.

Your website needs to be faster and compatible with all kind of screen sizes. If you use images as a web element then its won’t be displayed correctly in retina displays because of its size.

Similarly you cannot change the color if you are using images, For example you might want to display same web element but with two different color in same page. In that case you need to use two images instead of one, That bring us a third issue : Website speed. As number of images loaded increases your website speed decreases.

So what’s the solution ? Using Font icons instead of image icons can eliminate these issues.

Automattic, The startup by WordPress founder is constantly improving WordPress by awesome open source plugins, themes and other projects. Their recent project called Genericons is a open source icon fonts which can be used in WordPress Themes to replace regularly used image icons.

So, In this post I am going to show how you can make use of Genericons to replace image icons used in any WordPress Theme.

Implementing Genericons in WordPress Themes

Download Genericons Fonts here and extract it. In extracted folder you can find folder named Font, Just copy the folder and paste it in your theme folder.

Now you need to import the font to your theme by adding following codes at the top of your theme’s style.css file.

@font-face {
    font-family: 'Genericons';
    src: url('font/genericons-regular-webfont.eot');
    src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/genericons-regular-webfont.woff') format('woff'),
         url('font/genericons-regular-webfont.ttf') format('truetype'),
         url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Now you have successfully added Genericon support to your theme. So lets see how to use them in your theme.

You can display genericons in two ways : Directly adding the html to your theme files or adding via CSS. Lets see how to do both.

Head over to Genericons project page. You can get HTML and CSS code for different icons. Select any icon you want to use, In top you can see options to get HTML and CSS code of the selected icon.

genericons

For example here is a HTML code to display chat icon


<div class="genericon genericon-chat"></div>

Implementing CSS is also very easy and its my recommened method. You need to copy the Content Hex code as you did above. For example chat icon hex code is

content: '\f108';

Below is the code to display chat icon in comment post meta of Copyblogger 2 Genesis child theme.

.entry-meta .entry-comments-link:before {
	content: '\f108';
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 16px/1 'Genericons';
	vertical-align: top;
}

Similarly here is the code to display file icon before categories post meta.

.entry-meta .entry-categories:before {
	content: '\f301';
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 22px/1 'Genericons';
	vertical-align: top;
}

Here is how it looks finally

genericons-demo

Hope you found this tutorial useful. Subscribe my newsletter to get updates about recent tutorials and free WordPress stuffs. Please leave a comment if you have any question or suggestion for me.

Comments

  1. says

    It is worth noting that WordPress now includes some icons of its own, due to the new appearance in the admin area. The best part is that they are included with WorDPress itself, so that simplifies things quite a bit.

  2. Tom says

    Vivek,

    This seems to work just fine in Chrome, Safari, and FF but IE9 doesn’t seem to render the ‘\f###’ values in the content: area. If I put plain text, the text renders but as soon as I enter the escaped value ( e.g. \f469), it renders a blank.

    Any thoughts?

  3. says

    WordPress is a powerful platform in current online market. Nowadays, Day by days raising built on WordPress platform using websites or blogs. This article has been providing a hot information about the WP theme. Keep it up guys!!!

Leave a Reply

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

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

CommentLuv badge