Having an icon beside text in a button

I have a button which is all css. I want to have an icon to the left of the text. How do i do that?

Thank开发者_如何学编程s.

<input type="submit"/>

---

button {
    background: orange url(images/icon.png) no-repeat 5px center;
    text-align: left;
    padding-left: 20px;
}

<button type="submit">Submit</button>

and another way :

button {
    postion: relative;
    text-align: right;
    padding-right: 20px;
}

button img {
    position: absolute;
    top: 5px;
    left: 5px;
}

<button type="submit"><img src="icon.png" /> Submit</button>

---

If you're using submit input buttons, then give the button some left padding and add the image as a non-repeating background image to the button with CSS.

<input type="submit" class="imageBut submitBut" value="My submit button text" />

CSS:

.imageBut {
    padding-left: 30px;
    background-position: 0 0; /* Adjust as appropriate */
    background-repeat: none;
}

.imageBut.submitBut {
    background-image: url(path/to/image.png);
}

---

Would something along the lines of

input {
    padding-left: 24px;
    background: url(an-icon.png) 4px 50% no-repeat;
}

work?

---

Hmmmmmmm. How about something like:

<img src="the-icon"><input type="submit"/>

---

You can also use jQuery, like this:

$("#button-submit").button({icons: {primary:'ui-icon-play'}});

With the HTML like so:

<input type="submit" name="submit" id="button-submit" /><label for="button-submit">Start</label>