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/

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

2 个答案: