Skip Navigation

[Resolved] FA Icons inside the Filter Reset Button

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to use Font Awesome icons in my Views filter Submit and Reset buttons.

Solution: Ppdate the CSS font definition to apply to the reset button as well as the submit button:

input[type="submit"], input[name="wpv_filter_reset"] {
    font-family: FontAwesome;
}

Then use this format for the shortcode:

[wpv-filter-submit name=""]
[wpv-filter-reset reset_label=""]

The "name" attribute works on the submit button, but the "reset_label" attribute works on the reset button.

Relevant Documentation:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-filter-submit
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-filter-reset

This support ticket is created 6 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 2 replies, has 2 voices.

Last updated by dmitryK-2 6 years, 10 months ago.

Assisted by: Christian Cox.

Author
Posts
#605542
Screen Shot 2018-01-11 at 22.45.13.png
2018-01-11_22-42-25.png

I am trying to: insert FA Icon value  inside RESET filter button of WP-Archive for Woocommerce shop products using method from this tread https://toolset.com/forums/topic/use-font-awesome-inside-a-button/

my button looks like this:
[wpv-filter-reset name="" class="button alt"] - no luck
[wpv-filter-reset name="Reset" class="button alt" value=""] - no luck

CSS placed in Layout CSS box of Toolset
Please see screenshot attached

Link to a page where the issue can be seen:
hidden link - Reset button below the top filter should be FA Icon

I expected to see: FA Icon instead of RESET word

Instead, I got: RESET word

#605565

Hi, please update the CSS font definition to apply to the reset button as well as the submit button:

input[type="submit"], input[name="wpv_filter_reset"] {
    font-family: FontAwesome;
}

Then use this format for the shortcode:

[wpv-filter-reset reset_label=""]

The "name" attribute works on the submit button, but the "reset_label" attribute works on the reset button.
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-filter-submit
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-filter-reset

#605668
Screen Shot 2018-01-12 at 12.30.15.png

Perfect!