Button with an icon inside it - html

Question

I want to know how to add a small icon in this button aligned on left with the text
<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

Add a span to your text and put a background aligned to the left for this span.
<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/

Answer 2

If I understand your question correctly, here is the example - 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

Wouldn't this do it?
<a class="button" href="#"><img src="xxx"/>button</a>
Or are you looking for somthing more complicated?

Answer 4

It's a pretty common practice to add padding-left to your button, and position a background to fill that gap that's created.
.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;
}

Answer 5

Here's a 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;
}
In case that you have multiple buttons and you want different image for each use :nth-child() pseudo class to target each button e.g.
.button:nth-child(2) {
background: red url( ... ) 5px 45% no-repeat;
}
.button:nth-child(3) {
background: blue url( ... ) 5px 45% no-repeat;
}
...