Image instead of text on search button

9 years ago
1
Topic

Dears,

Is there a way to use an image instaed of texte on the search button?

On a front end search form for example.

Thank you

Get a Book for SEBLOD
233 Posts
pepperstreet
9 years ago
0
Level 1

Hello sib,

Do you want to keep the bootstrap button style and place an image on the top? You might also use the Joomla IcoMoon webfont to select a proper icon...

Anyway, go to your search form and modify the search button:

  1. With #1 selected you should see the column "Label" and the default value of "Search". Simply replace it with the special keyword clear to remove the label in frontend output.
  2. Hence the small pencil icon to the left of the field name. Click on it to edit the parameter "Label Icon". You can "Hide" it... (or choose another icon from the select list). Save and close modal window.
  3. To customize your button further, you have to click #6. It provides the columns "MarkUp" and "MarkUp Class". Set MarkUp to "Default"! And MarkUp Class to any custom value you like. i.e. myImageButton
  4. Just in case, this extra CSS class makes sure you can target and modify that specific Search button only.

I assume you have some basic CSS knowledge...!? ;)

Now you can style that button to your liking... i.e. background image and position, remove bootstrap default borders, set width and height etc.

Get a Book for SEBLOD