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

如果您正在使用提交输入按钮，则为该按钮添加一些左侧填充，并将该图像作为非重复背景图像添加到带有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);
}

Answer 3

有点像

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

工作？

Answer 4

Hmmmmmmm。怎么样：

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

Answer 5

您也可以使用jQuery，如下所示：

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

使用HTML如此：

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

在按钮中的文本旁边有一个图标

5 个答案: