在按鈕中的文本旁邊有一個圖標

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

嗯。如何像：

<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>