Brett Brett - 3 months ago 17x
HTML Question

HTML / CSS How to add image icon to input type="button"?

I'm using the below CSS, but it puts an image in the center of the button. Any way to left or right align an icon using

<input type="button">
, so that the text and the image fit and align nicely?

background: url('/common/assets/images/icons/16x16/add.png');


If you absolutely must use input, try this:

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

It's usually a little easier to use a button with an img inside:

<button type="submit"><img> Text</button>

However the browser implementations of button for submitting are inconsistent, as well as the fact that all button values are sent when button is used - which kills the "what button clicked" detection in a multi-submit form.