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>元素没有高度和宽度属性但是单独添加高度和宽度并不能达到你想要的效果，因为<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;
}

将自定义图标放在引导按钮内

2 个答案: