Twitter Bootstrap - Making CSS Icons bigger

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

best and easiest

is to change font size of the span tag

span.glyphicon {
    font-size: 8px;  
}

or

<span class="glyphicon glyphicon-check" style="font-size: 1.2em"></span>

using FontAwesome?

And if like me you use FontAwesome too, you could go hybrid ;) use these classes

<span class="glyphicon glyphicon-check fa-lg"></span>
<span class="glyphicon glyphicon-check fa-2x"></span>
<span class="glyphicon glyphicon-check fa-3x"></span>
<span class="glyphicon glyphicon-check fa-4x"></span>

Answer 2

What if you use scale()???

.logo-icon {
    transform:scale(2.0,2.0);
    -ms-transform:scale(2.0,2.0); /* IE 9 */
    -moz-transform:scale(2.0,2.0); /* Firefox */
    -webkit-transform:scale(2.0,2.0); /* Safari and Chrome */
    -o-transform:scale(2.0,2.0); /* Opera */
}

Isn't it easier to use and maintain? You can scale to any size you wish without recalculating background-size and position.

I am using this for reducing the size of the icons in some parts of my system. I spent around 1 hour looking for a solution to reduce and almost forgot about scale(). So, just sharing to help others. =D

But, of course, if you make them bigger you will not get a perfect good looking icon.