html - 将自定义图标放在 Bootstrap 按钮内

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

首先是你的<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;
}