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.
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
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.