html - 将图标添加到文本旁边的按钮

Question

我想做一个像这样的按钮[icon.png text-here]

这样按钮就有一个图标，然后是文本。

到目前为止我的代码：

[CSS]

.icon {
    background: url('icon.png');
    float: right;
    width: 40px;
    height: 40px;
}

[html]

<input type="submit" id="submit" class="icon" value="Log Me In"/><input type="button" id="cls" value="Clear All"/>

请告诉我我做错了什么任何帮助将不胜感激谢谢！

Answer 1

只需将位置添加到图标和一些 CSS 以设置按钮其余部分的样式。

HTML

<input type="submit" id="submit" class="icon" value="Log Me In"/>

CSS

input{
                 /* Change `http://placehold.it/50x50` to your icon */
    background:green url("http://placehold.it/50x50") 10px center no-repeat;
    height: 75px;
    padding: 10px 10px 10px 70px;
} 

http://jsfiddle.net/daCrosby/tvNCa/1/

Answer 2

我认为这是最简单的方法

<button type="submit">some text <i class="icon"></i></button>


.icon {
  display: inline-block;
  background: url("http://placehold.it/16x16&text=icon");
  width: 16px;
  height: 16px; 
}

这里的例子：http: //jsfiddle.net/dXdF2/1/