orclage Explore The Tech World
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.
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.
|
1 2 3 4 5 6 7 8 |
// Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author's name. if ( $tag_list ) { $utility_text = __( 'This entry was posted in %1$s and tagged %2$s on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' ); } elseif ( $categories_list ) { $utility_text = __( 'This entry was posted in %1$s on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' ); } else { $utility_text = __( 'This entry was posted on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' ); } |
We need to add classes for every category to display the Genericons.
Replace the above code with the one below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author's name. if ( $tag_list ) { $utility_text = __( ' <span class="posted-author">%4$s</span> <span class="posted-category">%1$s</span> <span class="posted-date">%3$s</span>.', 'twentytwelve' ); } elseif ( $categories_list ) { $utility_text = __( ' <span class="posted-author">%4$s</span> <span class="posted-category">%1$s</span> <span class="posted-date">%3$s</span>.', 'twentytwelve' ); } else { $utility_text = __( ' <span class="posted-author">%4$s</span> <span class="posted-date">%3$s</span>.', 'twentytwelve' ); } |
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:
|
1 |
/public_html/wp-content/themes/YourTheme |
Add below CSS code to the theme Style Sheet (style.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/* Adding CSS to Classes */ .comments-link:before { content: "\f300"; } .posted-author:before { content: "\f304"; } .posted-category:before { content: "\f301"; } .posted-date:before { content: "\f307"; } .posted-category:before, .posted-date:before, .posted-author:before, .comments-link:before { font-family: 'Genericons'; font-style: normal; font-weight: normal; height: 16px; line-height: 1; text-decoration: inherit; font-size: 23px; display: inline-block; vertical-align: top; width: 24px; -webkit-font-smoothing: antialiased; } /* font location */ @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; } |
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.
Don’t forget to post your views, if you have any questions let me know through comments.
Click For Post Excerpts For WordPress
