Question

I’m using Twitter Bootstrap and it says to use <i class="icon-flag"></i> if I want to use an icon from their CSS sprite.

How can I add my own css class called .logo-icon which will take one of their icons but make it bigger?

My class currently looks like:

.logo-icon {
    background-image: url("../img/glyphicons-halflings-white.png");
    background-position: -312px -24px;
}

Answer 1

It’s not going to look as nice as using FontAwesome (which is an actual font), but you can scale glyphicons using the background-size property. This will also entail scaling all the other values by an identical factor, which means you can’t just do this generally, but will need to do this for a single icon at a time.

Example, doubling the flag icon would be:

.icon-flag.logo-icon {
  width: 28px;  // 14px * 2
  height: 28px; // 14px * 2
  background-size: 938px 318px;  // original dimensions * 2
  background-position: -624px -48px;  // original position * 2
}

If you do want to do this for arbitrary icons, you would be better off working with the LESS where you could probably generate this programatically. Personally, I think switching to FontAwesome is the better alternative.