How to change the icons of the homepage category menu in Classifieds theme?

As classifieds theme is one of Directory child themes it has all the Directory themes features included, apart from this classifieds theme has some functional and design changes according to the niche. “Homepage category menu” is also one of those special widgets designed for Classifieds theme with icons for different classifieds categories

Here in this tutorial we will give you the detailed information on “How to change the icons of the homepage category menu in Classifieds theme.”

In classified theme we have provided a unique category menu at home page area. Here is the screenshot of our demo‘s homepage category menu. We will see how we can change icons in this menu.

demomenu

If you need to add some other menu tabs OR want to change the existing sample icons provided with the dummy data then here are some easy steps, through which you can get this done:

How to add new menu icons OR tabs?

If you have installed sample data then login to the back-end and go to WP-admin> Appearance> Menus> select> Homepage Category menu. We do provide the sample of this menu names as “Homepage Category menu” for your reference.

Now if you are not using a sample data/dummy data provided with the theme then you will need to create a new menu with the same name as “Homepage Category menu“.

You can show Images also instead of the icons and here is the process by which you can get this done.

Use image in that menu tab:

To place an image for this item you need to define the image path into navigation label option of your custom menu like this:

<img src=”http://localhost/wordpressClassified/wp-content/uploads/2013/07/handbag.jpg” alt=””>

Here you will need to change the highlighted path of image with yours, and place a path at where your image is saved on your server that you want to show here for this item.

Use icon in that menu tab:

To place an icon for this item you need to define the CSS class into navigation label option of your custom menu like this:

<i class="fa fa-book"></i>Vehicles

Here is the screenshot for your reference about both the above mentioned methods:

  • Use image in that menu tab
  • Use icon in that menu tab

Categorymenus

Resultant “Homepage Category menu” will be displayed on your site’s front-end like this:

menu2

Change the default icons or alter the new icon with old ones:

Here we are going to provide you another trick by which you can change the icons easily by finding your suitable icon’s ready made CSS classes as well.

As our all Directory themes are compatible with the “Font-Awesome” icons too, you can use any of them according to your unique needs. Refer to this link to get the list of all icons with their own CSS classes as well: https://fortawesome.github.io/Font-Awesome/icons/

Suppose you need to change the camera icon to book icon then replace this CSS class “<i class=”fa fa-camera”></i>” with this “<i class=”fa fa-book”></i>” into that  navigation label option as explained about as “Use icon in that menu tab“

I am hoping this article will help you add your relevant icons in the homepage category menu in Classifieds theme, if you have any queries, feel free to contact us.