Replace button text with image

0 votes

Can you embed images into the form buttons? Ideally we want imbedded images instead of having to click a text button that needs translation.

in How To by (7.0k points)

1 Answer

0 votes
Best answer

Yes, you can replace the button text with an image. There are two different options:

1. Using Emojis

If the image you need is already available as a standard Emoji, then you can change the button text to an image by simply including the appropriate code. Examples below.

  • &#x274c : ❌, Cross mark
  • &#x2714 : ✔, Check Box

Emoji Reference List

2. Replace the button text with an image using CSS.

A second option is to hide the button text by making it transparent and replacing it with a background image using CSS. The steps are below.

  • Add a CSS class to the button.
  • Add custom CSS to hide the button text and add a background image.

An example is provided on the demo site. ​Image Button Sample

Assuming that you set a CSS class of imageButton the custom CSS required would be as follows.

button.imageButton {
    color: transparent !important;
    background-image: url(../Images/feedback.png) !important;
    background-repeat: no-repeat !important;

For more details on adding custom CSS see: Custom CSS

by (64.5k points)
edited by
FYI @anthony the sample link is missing the colon after https. Also just wanted to point out that emojis can be used as well.
@Daniel, I fixed the link.  Thanks for the pointer about using emojis.  I will add that to the answer.
Welcome to the dbFront Q&A site, where you can ask questions and receive answers from other members of the community.
 | Minimalist Answer Theme by Digitizor Media
Powered by Question2Answer