This is tutorial on how to add icons to bender theme with classes and css.
First step:
Go to your functions.php and locate this code:
<h1><a class="category<?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a></h1>
We will need to add some classes to that code and change some things.
As you can see below code i have added class to <h1> and <a>. And i have changed slug to id. which we will need later.
Replace the above code with this below:
<h1 class="icon_c"><a class="category cat_<?php echo osc_category_id() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a></h1>
Now that done we will work with main.css.
First you will gather the id's for your main category titles. To do so you just go to your main home page and right click on the name and select "inspect element"
And you will see class like this "Class="category cat_(a number)"". Remeber that number and let's go to main.css.
Here we will add some styles:
To call the icon for the Computer version we will need this css line:
.icon_c .cat_
27 {
background:url(
/img/house.png) no-repeat left !important;
text-transform:uppercase;
padding-left:24px;
}
As you can see i have used the icon_c class that i gave to <h1> and the cat_(a number) i gave to <a>. The number is something you should change to your own.
Now we need to add some css for the mobile version:
.active .cat_
27{
background:
#228DAC url(
/img/house_white.png) no-repeat left !important;
text-transform:uppercase;
padding-left:24px;
}
On the above code for mobile i have changed .icon_c to .active. Since we need to change icon when category is active. In this case to a white icon.
So you will need two photos (if you do like i did), which i have used. Since the background on mobile is blue when active (or black, depending of your theme color)
Upload the files to your server and you have icons next to your title. I have attached a image on how it looks on the computer and mobile.
To download icons easy go to this domain
http://www.iconsdb.com/REMEMBER THAT THE CSS ABOVE IS FOR MY NEEDS, SO YOU CAN PLAY AND CHANGE WHAT YOU NEED FOR YOUR SITE.
EVERYTHING IN RED SHOULD BE CHANGED BY YOU!I have chosen padding 24px since my icons are 24x24 and aligned left
