Question

我正在尝试制作一个带有图标的div按钮，但问题是我不知道该怎么做，我用google搜索它，有一些方法与bootstraps但我不明白bootstraps，我试过span，这是我的代码＆gt;＆gt;

html:

<a href="about.html" style="text-decoration:none"> <span class="icon" style="background:url(icon.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;"></span><div class="div">
<h2>CALL CUSTOMER CARE</h2>
</div></a>


css:


.div {




text-align: left;
width:81%;
line-height: 298%;


 opacity: .8;
margin-left:0%;
margin-bottom:0px;
 border-radius:7px;
 background-color: hsl(0, 69%, 22%) !important;
  background-repeat:repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
  background-image: -moz-linear-gradient(top, #b42121, #5e1111);
  background-image: -ms-linear-gradient(top, #b42121, #5e1111);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
  background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
  background-image: -o-linear-gradient(top, #b42121, #5e1111);
  background-image: linear-gradient(#b42121, #5e1111);
  border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
  -webkit-font-smoothing: antialiased;
}



.div h2{
font-size: 100%;
margin:0px;
font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
text-shadow: 0.1em 0.1em 0.1em  #2B3856;
}






.icon {
    background: url(icon.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
}

Answer 1

OMG！格式化代码！

Bootstrap或Semantic的图标是字体，而不是图像。因此，如果您想将图像作为图标放在按钮上，您应该执行以下操作：

button {
    background: url(youricon) no-repeat ....;
    padding-left: 25px;
}

它只是在按钮的左侧放置一个图像并识别您的文字否则你应该学习bootstrap是如何工作的（它非常简单！）
有关如何使用字体的示例，您可以查看W3C：
http://www.w3schools.com/w3css/w3css_icons.asp

Answer 2

启动的基本代码。

.button {
    display:block;
    width:100px;
    padding:10px;
    color:#fff;
    background:#009999 url(https://lh4.googleusercontent.com/-l8CnQ0Y9Gi8/AAAAAAAAAAI/AAAAAAAAACU/y9lfiMGjWLU/photo.jpg?sz=32) no-repeat right;
}

<a class="button">Button</a>

带图标的CSS按钮

2 个答案: