Tavisha: Custom Category Icon

Have you try the newest theme from Colorlabs? The name is Tavisha, and it was released on WordPress.org market. You can get it for free from here.

If you already try the theme or maybe check the demo page, you will notice if the theme will displaying all categories you have including the latest posts it has. Before the category name you can see a ‘newspaper’ icon is displayed on all sections.

At this tutorial, i will tell you about how to change the icon on Tavisha theme. By default all icons set already available within the theme, but only newspaper icon which is called.

You can browse the available icons set at a file named font-awesome.css. This file can be found via FTP at directory: wp-content → tavisha → includes → css. Start from line 175 you can see a list of icons you can use.



At the image above i already able to change the icon of uncategorized from newspaper into motorcycle. To do it, you can simply use this custom CSS code:

.category-block:nth-child(2) .fa-newspaper-o:before {content: "\f21c";}

Very easy isn’t it? You can read the explanation about the code below:

  • nth-child(2)
    You can modify the number (2) into any number you want. This number means by: you are going to modify the second category block. If you want to modify the fifth category block icon, you can change the number into 5
  • content: “\f21c”
    This code means by you are going to use icon with ID f21c which is motorcycle. You can change the ID into anything you want (browse it at font-awesome.css)

And done!


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s