Replace button text with image

Question

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

Answer 1

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

Comments

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.