我正在尝试在引导按钮内使用自定义图标,这是html部分:

<button class="btn btn-info pull-right toggle" data-pausetext="Break In"
 data-resumetext="Resume" ><i class="icon-play"></i> Clock In</button>

在样式表上有以下内容:
.icon-play {
background-image : url(../img/Clock-Play.png) no-repeat;
background-position: center center;
}

但是按钮内没有显示该图标...请帮助...谢谢

最佳答案

首先,您的<i>元素没有height和width属性。
但是,仅添加高度和宽度并不能满足您的要求,因为<i>是一个内联元素,因此您还希望添加另一个属性(即i-e)。 display: inline-block然后要使其完美的最后一件事是添加background-size: cover(将图标准确地调整到其容器元素中)

.icon-play{
  background-image : url(../img/Clock-Play.png);
  background-size: cover;
  display: inline-block;
  height: 15px;
  width: 15px;
}

10-05 20:41
查看更多