在Bootstrap按钮内放置自定义图标

Question

我想在Bootstrap按钮中使用自定义图标，这是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;
}

但是图标没有显示在按钮内部...请帮忙...谢谢。

- Claudio Martinez

Answer 1

首先，你的<i>元素没有高度和宽度属性。
但仅添加高度和宽度是不够的，因为<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;
}

- Yousaf Hassan

Answer 2

您的图标元素没有宽度或高度 - 尝试在其中添加填充。此外，您可能需要研究一下 cover 而不是 no-repeat - 它会自动拉伸背景（成比例）以覆盖整个元素，因此它将适合您放置的任何元素。

- Michael Thariath