Twitter Bootstrap – Making CSS Icons bigger

Twitter Bootstrap – Making CSS Icons bigger

I’m using Twitter Bootstrap and it says to use 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;
}

Solutions/Answers:

Solution 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.

Related:  How can I disable Bootstrap's “affix” on smaller screens?

Solution 2:

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>

Solution 3:

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.

Related:  Bootstrap collapse - go to top of the open item?

Solution 4:

I do prefer to simple change the font size:

.large-icon {
  padding: 11px 15px;
  font-size: 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

References