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