Font Awesome Icon in custom search View Submit and Reset Buttons

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

Problem: I would like to change my custom search View's "Submit" and "Reset" buttons to use Font Awesome icons instead of text.

Solution: Use the "name" attribute on the submit button and the "reset_label" attribute on the reset button to insert the necessary HTML markup:

[wpv-filter-submit name="<i class='fa fa-search'></i>" type="button" output="bootstrap" style="background-color:#44c4aa; font-size:0.8em;  font-weight: 600; color:#ffffff; margin-top:2px;border-radius: 4px; padding:12px 5px !important;"]
[wpv-filter-reset output="bootstrap" reset_label="<i class='fa fa-search'></i>" type="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, 6 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.

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)

Tagged: Views, Views plugin

This topic contains 4 replies, has 2 voices.

Last updated by massimoS527 6 years, 6 months ago.

Assisted by: Christian Cox.

Author

Posts

May 21, 2018 at 2:42 pm #901676

massimoS527

I want to use an icon button instead of the word "SEARCH".

the code is fa-fa-search, but I do not know how to insert it in the shortcode
this is the code: <button class = "btn"> <i class = "fa fa-search"> </ i> </ button>

this is the view shortcode:

 <div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">
[wpv-filter-submit name="search" output="bootstrap"  style="background-color:#44c4aa; font-size:0.8em;  font-weight: 600; color:#ffffff; margin-top:2px;border-radius: 4px; padding:12px 5px !important;"]
[wpv-filter-reset output="bootstrap" style="background-color:#d40000;font-size:0.8em; font-weight:600; color:#ffffff; margin-top:2px; border-radius: 4px; padding:12px 5px !important;"]

how do I insert it in the View shortcode?

thank you

May 21, 2018 at 4:16 pm #901715

Christian Cox

Try this:

[wpv-filter-submit name="<i class='fa fa-search'></i>" type="button" output="bootstrap" style="background-color:#44c4aa; font-size:0.8em;  font-weight: 600; color:#ffffff; margin-top:2px;border-radius: 4px; padding:12px 5px !important;"]

The btn class will be added to the button element automatically.

May 22, 2018 at 2:20 pm #902040

massimoS527

it works only with submit and not with reset

you see: hidden link

May 22, 2018 at 3:06 pm #902087

Christian Cox

The syntax for the reset button is different:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-filter-reset

Use the "reset_label" attribute instead of the "name" attribute:

[wpv-filter-reset output="bootstrap" reset_label="<i class='fa fa-search'></i>" type="button"]

May 22, 2018 at 3:41 pm #902118

massimoS527

thank you !!!