Use fontawesome icon instead of reset button text

Hello,

Plugin do not have option to do something like this.
You can add icon to reset button with help of custom CSS.

Regards,
Oleg

Hello @razyrx

Thanks. But how with custom CSS?
Can you give us any idea how this should work?

Thanks & cheers

Hello,

You need to use same CSS code that uses block with “fas fa-minus-square” classes.
You can check it with help of browser developer tools.

Regards,
Oleg

Hello @razyrx

Thanks. We did that alrady but we do not know how to insert a fontawesome icon via CSS in the Shortcode button.

Can you maybe make a example?

Thanks & Cheers

Hello,

To add icon use something like this:

.bapf_reset:before {
    content: "\f146";
}

Regards,
Oleg

Hello @razyrx

Okey, Now we made some tests with the following CSS:

input.berocket_aapf_reset_button:before {
    content: "\f146" !important;
}

.bapf_reset:before {
    content: "\f146" !important;
}

But both of these CSS does not work. We are able to insert the icon in front of the button with a other CSS div class but NOT in the button itself. ??

“We are able to insert the icon in front of the button with a other CSS div class but NOT in the button itself.” – true. Insert it before and hide the button

Hello Dima @dholovnia

That was also a try… but then nothing happens when I click the icon. I guess, this is because the icon does not trigger the button.

Cheers.

Could you please provide site url?

Regards,
Dima

Hello @dholovnia

Sure, https://brewmee.ch/shop/ is the url.

The Button is only visible on mobile view when a filter is selected.

1. Switch to mobile view
2. select a filter via filter button
3. filter reset button becomes visible (Maybe a page refresh F5 is needed if you switch to mobile view that the reset button becomes visible)

Cheers

• This reply was modified 4 years, 2 months ago by niikk.

Hello,

After reading a bit – it is impossible to add :after or :before for the input.

The only solution is to make input value empty, add after it element with icon, place element above the button and add through CSS to the element style to not interact with mouse.

Regards,
Dima

Hello,

Our plugin displayed button as input because seems “Deprecated Filters” add-on enabled on your site.
Please disable “Deprecated Filters” add-on in plugin settings -> Add-ons tab.

Regards,
Oleg

hello @razyrx

Thanks. I disable the “Deprecated Filters” addon now. First I made some tests on Dev.

But I guess the new shortcodes work not 100% as the old one. Because I’m not able to use a filter shortcode twice on a page. I have different filter approach on desktop (Left sidebar) and mobile (Off canvas). And when I use a shortcode or your widget in the sidebar, then i’m not able to the same filter in the off canvas.

Workaround: I now build every filter twice and it works.. but this is strange. With the older version it was no problem at all. ??

Cheers

Hello,

Yes, new version remove filters duplicate, because it causes a lot of issue with old version.

Regards,
Oleg

Thanks @razyrx

This means “best practice” is currently to create filter twice in order to show them on desktop in the sidebar and on mobile in slide-in canvas. Right?