Place custom icon inside bootstrap button

Question

I'm trying to use a custom icon inside of a bootstrap button, this is the html part:

<button class="btn btn-info pull-right toggle" data-pausetext="Break In" 
 data-resumetext="Resume" ><i class="icon-play"></i> Clock In</button>

and on the stylesheet have this:

.icon-play {
background-image : url(../img/Clock-Play.png) no-repeat;
background-position: center center;
}

but the icon is not showing inside the button...please help...thanks

Answer 1

Your icon element doesn't have a width or height - try adding a padding on there.

Also, you might want to look into cover instead of no-repeat - it will automatically stretch the background (proportionately) to cover the entire element, so it will fit whatever element you throw it in.

Answer 2

First of all your <i> element doesn't have a height and width property.
But adding height and width alone wouldn't do what you want because <i> is an inline element so you want to add another property as well ie. display: inline-block Then the last thing to make it perfect would be to add background-size: cover (to adjust icon exactly into its container element)

.icon-play{
  background-image : url(../img/Clock-Play.png);
  background-size: cover;
  display: inline-block;
  height: 15px;
  width: 15px;
}