在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中的按钮旁边添加一个图标

回答

相关问题