Question

Everything is perfect when I use:

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> text
</button>

I want my own icon. That’s why I use:

<button type="submit" class="btn btn-primary">
  <i class="icon-school icon-white"></i> text
</button>

My icon is displayed in the button, but my icon is a bit higher (20px x 16px). So, it is displayed for 75%. How to fix it?
Changing height or padding doesn’t help.

Thank you.

Answer 1

Create a icon-perso class

<button type="submit" class="btn btn-primary">
  <i class="icon-school icon-perso"></i> text
</button>

Add the following css to override the default behaviour with:

• the url of your picture
• the width and height of the picture
• change the line-height to the picture height
• margins if required

.

.icon-perso {
  background-image: url("../img/glyphicons-perso.png");
  width: 20px;
  height: 16px
  line-height: 16px;
}

If you picture contain several icons like glyphicons-halflings.png you may have to change the background-position

.icon-school {
  background-position: 0px 0px;
}

You can have a look at bootstrap.css around from line 2143 if you are curious.