将自定义图标放入引导按钮

Question

我正在尝试在引导按钮内使用自定义图标，这是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;
}

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

Answer 1

您的图标元素没有宽度或高度-尝试在其中添加填充。

另外，您可能希望查看cover而不是no-repeat -它会自动（按比例）拉伸背景以覆盖整个元素，因此它可以适合您放入的任何元素。

Answer 2

首先，您的<i>元素没有height和width属性。
但是单独添加高度和宽度并不能满足您的需求，因为<i>是一个内联元素，因此您也想添加另一个属性，即。 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;
}