HTML display an icon as submit button

Question

I'm making a project for school, but I'm stuck on this problem: I want an input submit, but instead of the button I want an icon to click on. I have not figured it out yet after searching for other answers.

<form>
    <input type="submit" id="submit-icon">
</form>

What icon do you want to use? Do you have a link to it? Have you tried `background-image: url(path/to/image.png)`? — David Thomas, Oct 27 '16 at 16:42
@DavidThomas I have tried background-image: url(path), but it resulted in the image not showing properly. I want to use a search icon. — Yarnick Boertje, Oct 27 '16 at 16:44

score 0 · Answer 1 · answered Oct 27 '16 at 16:44

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>

HTML display an icon as submit button

1 Answers1