在CSS中的按鈕旁邊添加一個圖標

-3

我想在CSS中使用bootstrap做一些「小事」，但我沒有運氣。任何人都可以幫我解決如何在我的表單按鈕旁邊添加背景圖標嗎？在CSS中的按鈕旁邊添加一個圖標

enter image description here

<form> 
    <button type="submit" class="btn btn-primary">COOL BUTTON 
    </button> 
</form>

http://jsfiddle.net/ekaU2/

謝謝！

來源

2014-05-11 Sahir

這個問題似乎是題外話，因爲它缺乏從OP最小的努力來解決問題，是一個「爲我做」的問題。 – easwee

您可以使用任何圖像或圖標，但如果你使用bootstrap icons例如，你可以做這樣的：

<form> 
    <button type="submit" class="btn btn-primary"> 
     COOL BUTTON 
     <span class="glyphicon glyphicon-search"></span> 
    </button> 
</form>

Demo

來源

2014-05-11 08:01:07 cor

我有一個單獨的圖標，我將使用，但我明白了。但是我遇到麻煩的是設置圖標的背景和寬度。 http://jsfiddle.net/ekaU2/5/ – Sahir

您可以在按鈕標籤外找到span標籤。修正這裏：http://jsfiddle.net/acor/5B66P/ – cor

啊，我想我現在理解這一點。我嘗試了跨度裏面，但由於某種原因，我沒有想到添加填充和作出一些調整，使它看起來像一個框內的按鈕。謝謝你的幫助！ – Sahir

您可以使用:after僞類。

.btn:after { 
    content: " "; 
    display: block; 
    position: absolute; 
    top:0; 
    right: -60px; 
    width: 60px; 
    height: 60px; 
    background: #ddd url(path/to/img) no-repeat center center 
}

此方法不需要更改HTML。

這裏有一個演示：jsFiddle

來源

2014-05-11 08:03:48 Scott

在CSS中的按鈕旁邊添加一個圖標

回答

相關問題