How to change category icon in widget side bar

Hi @laurynass,

Thanks for reaching out to us. I’m happy to help you!

It would be great if you could share a screenshot of what you’re talking about using a tool like https://snipboard.io – please follow the instructions on the page, then paste the URL when you reply. It works with Chrome, Firefox, Safari, and Edge.

Please also share the URL where we can view the icon on your site.

That way, we can better understand the issue and recommend how to change the icon.

Thank you!

Hi @wpniall

Thanks for reply.
Site is not launched yet. So link will not help. Hope you will find screenshot here: https://snipboard.io/sZnui1.jpg

On the left side you can find product categories. Each and every has a small “folder like” icon. I would be happy to use other than that.

Thanks
Laurynas

Thanks for providing the screenshot, it helped a lot!

To change that icon please follow these steps:

1- Navigate to your WordPress dashboard > Appearance > Customize > Additional CSS

2- Add the following CSS code

.widget_categories ul li::before {
    content: "\f5bb";
}

3- Search for the icon you want from https://fontawesome.com/v6.0/icons?d=gallery&p=1&s=solid&m=free and note the Unicode value

Screenshot: https://d.pr/i/hdCIZm

4- Replace the content value—f5bb from the example above— with the value you choose.

Thanks!

Thanks @nagdy,

It does not work. Unfortunately.

https://snipboard.io/inTE6J.jpg

Hi @laurynass ,

Can you try this code instead \f4d8?

Screenshot: https://d.pr/i/jlYXiI

Hi @thup90 ,

thanks, i’ve tried and no result. None of the codes are working.

https://snipboard.io/0NaEyh.jpg

BR
Laurynas

Hi @laurynass,

It seems the element might not be targeted correctly. Without seeing your site, it’s not possible for me to confirm this. I’d recommend opening the source code and see which element needs to be targeted. Here are some links to CSS documentations which might help:

https://www.w3schools.com/cssref/sel_before.asp
https://www.w3schools.com/cssref/css_selectors.asp

@thup90 Thanks. Site is set as public now.

Hi @laurynass,

I assume this is the website’s URL https://greenworksbaltic.com/, right?

If it is right, so the selector was incorrect. Can you please use this CSS instead?

.widget_product_categories ul li::before {
    content: "\f4d8";
}

• This reply was modified 3 years, 7 months ago by Nagdy.

Hi @nagdy

You’re absolutely right, it is https://www.greenworksbaltic.com
It works now! Almost perfect, just opened category has “opened folder” icon ??

But now it is way better!

Thanks
Laurynas

@laurynass – Good to know that the you were able to achieve desired customization.

Thanks for your help, @nagdy !

That’s awesome, @laurynass!

If you want to change the “opened category” icon as well, you can use this CSS

.widget_product_categories ul li.current-cat::before {

    content: "\f4d8";

}

PS: You can, of course, change the content value to something else.

Thanks!

Thanks, @nagdy

it Works perfect! And you actually chose an icon i chose as well! ??

BR
Laurynas