Наличие значка рядом с текстом в кнопке

Question

У меня есть кнопка, которая все css.Я хочу, чтобы значок слева от текста.Как мне это сделать?

Спасибо.

<input type="submit"/>

Answer 1

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

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

и другим способом:

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>

Answer 2

Вы также можете использовать jQuery, например:

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

С HTML так:

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

Answer 3

Hmmmmmmm. Как насчет чего-то вроде:

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

Answer 4

Будет ли работать что-то вроде

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

?

Answer 5

Если вы используете кнопки ввода ввода, затем дайте кнопке отступ слева и добавьте изображение в качестве неповторяющегося фонового изображения к кнопке с 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);
}