html - 里面有图标的按钮

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

fiddle -> http://jsfiddle.net/fg3tK/6/