Changing the filter icon on the shop page

Looked at some previous threads on this, eg this one; https://xtemos.com/forums/topic/how-to-change-the-icon-for-side-bar-filter-on-mobile/

The suggested resolution is this:

.wd-shop-tools .wd-show-sidebar-btn > a:before {
  content: "\f118";
	font-size: 16px;
}

But when i try using the icon code I want it doesnt work. Which icon library is this referencing? I tried using icon codes from Font Awesome and Material Design but neither are recognised.

This is the icon I would like to use because having two hamburger icons on the page looks pretty awful.

https://fontawesome.com/icons/sliders?s=solid&f=classic

Hello,

This icon relates to the font-family: “Font Awesome 6 Pro”; and this font is not supported. You can insert font-family: “Font Awesome 6 Fre”;

If you have any questions please feel free to contact us.

Best Regards

Hi, sorry thats not the icon I wanted to use, I just copied that snippet from the other thread. That exact code actually works fine, and displays the filter icon OK. The one I want to use is a free one; f1de. That icon (Regular) is free.

https://fontawesome.com/search?q=slider&o=r&m=free

It’s strange because the example above, f118, doesnt show as the filter icon on fontawesome.. It’s a smiling face there… but displays as a filter icon using the above snippet? Whats causing this discrepency? It’s like it isnt contacting the correct library.

UPDATE: Added the fontawesome free library to the CSS and it worked OK.

Although im still having trouble changing the shop page mobile sticky sidebar icon. Could you advise please?

Hello,

Do you have a free FontAwesome to add? Do you want to replace it with an image?

Best Regards

Hi Elise, I sorted it. Thanks.

You are welcome! We are here to help.

Wish you a wonderful day!

You too, thanks Elise.

[Author]

Posts