Twitter Bootstrap - Making CSS Icons bigger

css, twitter-bootstrap

Solution

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.

Problem

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; } ```

Original source