在CSS中的按钮旁添加图标

Question

我正在努力做一些事情＆＃34;琐碎的＆＃34;就像CSS中的引导程序，但我没有运气。任何人都可以帮我解决如何在表单按钮旁边添加带背景的图标吗？

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

http://jsfiddle.net/ekaU2/

谢谢！

Answer 1

您可以使用任何图片或图标，但如果您使用bootstrap icons，则可以这样做：

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

Demo

Answer 2

您可以使用: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