按鈕與裏面

Question

我想一個圖標，知道如何在這個按鈕上留下的文字對齊添加一個小圖標

<a class="button" href="#">button</a> 


.button { padding: 15px 15px; 
    background: #000; 
    border-radius: 3px; 
    color: #fff; 
    font-size: 14px; 
    font-weight: bold; 
text-transform: uppercase;} 

JSfiddle

Answer 1

將跨度添加到您的文本中，併爲此跨距放置左側對齊的背景。

<a class="button" href="#"><span>button</span></a> 

.button span { 
    background:url('http://www.freesmileys.org/smileys/smiley-laughing002.gif') no-repeat; 
    padding-left: 20px;} 

小提琴 - >http://jsfiddle.net/fg3tK/6/

Answer 2

如果我正確理解你的問題，這裏是例如 - http://jsfiddle.net/u2py3/

.button { 
    border: 1px solid #563d7c; 
    border-radius: 5px; 
    color: white; 
    padding: 5px 10px 5px 25px; 
    background-image: 
     url(https://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6); 
    background-position-y: 465px; 
    background-position-x: 5px; 
    background-color: #563d7c; 
} 

Answer 3

這裏有一個FIDDLE

.button { 
    background: #000 url('https://cdn1.iconfinder.com/data/icons/iconslandtransport/PNG/24x24/CabrioletRed.png') 5px 45% no-repeat; 
    padding: 15px 15px 15px 35px; 
    border-radius: 3px; 
    color: #fff; 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 

如果你有多個按鈕，並且希望不同的圖像爲每個使用:nth-child()僞類例如針對每個按鈕

.button:nth-child(2) { 
    background: red url(...) 5px 45% no-repeat; 
} 
.button:nth-child(3) { 
    background: blue url(...) 5px 45% no-repeat; 
} 

... 

Answer 4

難道不是這樣嗎？

<a class="button" href="#"><img src="xxx"/>button</a> 

或者你在尋找更復雜的東西嗎？

Answer 5

這是一個非常常見的做法是添加padding-left到您的按鈕，和定位background填寫一個創建了這個空白。

.button { 
    background: #666 url('https://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6') 5px -188px no-repeat; 
    border-radius: 3px; 
    color: #fff; 
    font-size: 14px; 
    font-weight: bold; 
    padding: 10px 15px 10px 40px; /*Add some left padding*/ 
    text-transform: uppercase; 
}