里面有一个图标的按钮

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

如果我正确理解您的问题，请举例说明 - 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 2

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

如果您有多个按钮，并且您希望每个使用:nth-child()伪类的不同图像来定位每个按钮，例如

.button:nth-child(2) {
  background: red url( ... ) 5px 45% no-repeat;
}
.button:nth-child(3) {
  background: blue url( ... ) 5px 45% no-repeat;
}

...

Answer 3

不会这样做吗？

<a class="button" href="#"><img src="xxx"/>button</a>

或者您正在寻找更复杂的东西吗？

Answer 4

在文本中添加一个范围，并为此范围添加一个左对齐的背景。

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

小提琴 - ＆gt; http://jsfiddle.net/fg3tK/6/

Answer 5

向您的按钮添加padding-left是非常常见的做法，并定位background以填补已创建的差距。

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