Use an image on search submit button

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

Problem: I would like to use an image as the search submit button.

Solution: Apply a custom CSS to the Submit button and use CSS styles to display an image:

input[type="submit"].your-icon-class {
  background: url("../path/to/your/icon.png") no-repeat scroll 0 0 transparent;
  width: 60px;
  height: 60px;
}

This support ticket is created 5 years, 8 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: Custom search, Views, Views plugin

This topic contains 4 replies, has 2 voices.

Last updated by Ben 5 years, 8 months ago.

Assisted by: Christian Cox.

Author

Posts

March 4, 2019 at 2:56 pm #1209495

Ben

Is there any way that I can use an image or an icon for the [wpv-filter-submit] search button rather than using text?

March 4, 2019 at 7:14 pm #1209664

Christian Cox

Yes, you can add any CSS classes you'd like using the class attribute. Or if your site enqueues the FontAwesome library, you can use FontAwesome codes to insert any icon in the name attribute:

[wpv-filter-submit output="bootstrap" name="&#xf002;" class="my-font-awesome-class"]

Corresponding CSS for FA:

input[type="submit"].my-font-awesome-class {
  font-family: FontAwesome;
}

March 4, 2019 at 8:51 pm #1209706

Ben

Thank you for your reply Christian!

How would I go about doing this using a static image from the WordPress media library?

March 4, 2019 at 10:07 pm #1209730

Christian Cox

You would add your own custom CSS class or classes to the shortcode, then target and style those classes using custom CSS. Something like this:

input[type="submit"].your-icon-class {
  background: url("../path/to/your/icon.png") no-repeat scroll 0 0 transparent;
  width: 60px;
  height: 60px;
}

March 5, 2019 at 4:33 pm #1210127

Ben

Thank you Christian!

That works perfectly.