Increase the size of Bootstrap 2.3's Glyphicons

Question

Is there an easy way of increasing the size of Glyphicons?
I found some solution like Font Awesome but don't want to include new CSS library just to increase size 2 icons.

Answer 1

This is one way to increase the size of icons in Bootstrap 2.3. As I note in my comment, the results will be pretty poor because you are scaling the spritesheet image.

JSFiddle demo

.test {
    background-image: url("http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
    width: 90px;
    height: 90px;
    background-size: 2100px 800px;
}

Consider Fontello instead. They allow you to generate a custom font based on the icons you choose.

Answer 2

Setting the font-size of the <span> tag worked for me

<span class="glyphicon glyphicon-ok" style="font-size: 20px;"></span>

Answer 3

As of Bootstrap 3, glyphicons have been changed into fonts rather than sprites. This gives you more flexibility. For example, you can just set the font-size and move on.

<span class="glyphicon glyphicon-adjust" style="font-size:48px;"></span>

Or you can simply write a modifier class:

.glyphicon-2x {
    font-size: 48px;
}

Answer 4

Just need to set the fontsize up :) You have more than one option to do this:

First (set it straight to the element)

<span class="glyphicon glyphicon-search" style="font-size:30px"></span>

Second (set it in a css file)

.glyphicon{
    font-size: 30px; 
}

Third (build modify-classes) [i prefer this posibility]

.glyphicon-2x{
    font-size: 40px; 
}
.glyphicon-3x{
    font-size: 60px; 
}
...

Usage:

<span class="glyphicon glyphicon-2x glyphicon-search"></span>

there are more options to get the third one more tiny. there for you should read more about Less

according to your question and the comment that brandon gave me, you can use the above with a other icon contianer.

Bootstrap 2.3

First

<i class="icon-search" style="-webkit-transform:scale(1.8);"></i>

Second

.icon-search{
    -webkit-transform:scale(1.8);
    -moz-transform:scale(1.8);
    -o-transform:scale(1.8);
}

Third

.icon-x2{
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -o-transform:scale(2.0);
}
.icon-x3{
    -webkit-transform:scale(3.0);
    -moz-transform:scale(3.0);
    -o-transform:scale(3.0);
}
//here i use the css from above (Bootstrap 3)
//actually you can name it like you want
<i class="icon-search icon-2x"></i>

Answer 5

You can use:

.icon-whatever {
    zoom: 2;
    -moz-transform: scale(2);  /* Firefox */
}

But, it will look fuzzier the larger you go, as it is scaling the image up. A font-icon library will scale a lot better.

Answer 6

You can override bootstrap's class, for example:

// Size and position are not working.
.icon-glass {
  background-size: 800px;
  backgroung-position: 10px 50px;
  width: 24px;
  height: 24px;
}

The problem is that icons will look ugly due to the resolution.

Hope this helps!

Answer 7

If you use the glyphicons for buttons it's pretty simple:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span>
</button>

The btn-lg defines the size. You can use btn-lg, bnt-sm, btn-sx

Edit: If you don't use buttons or lg is not large enough, you can add an own class and use font-size (only tested in bootstrap 3.0). In bootstrap 3.0 glyphicons exist as .svg so they won't look ugly

Example:

<button type="button" class="btn btn-default btn-lg myGlyphicon">
  <span class="glyphicon glyphicon-star"></span>
</button>

CSS:

.myGlyphicon {font-size: 120%;}

or

.myGlyphicon {font-size: 70px;}

Answer 8

You can use IcoMoon.io a very easy to use tool for generating icon font of different colours ,size's and even you can generate sprites from you selection.

Answer 9

I just found a very easy way—using "transform". For example, place:

.glyphicon-chevron-right {transform:scale(2.9,2.9);}

in your CSS to increase it 2.9 times.

Answer 10

If you're using Bootstrap 3, why don't you use em widths on the icon? If the icons are embedded within headings/paragraphs/bodies etc. then using a font size in ems will increase the size of the icons relative to the paragraph that they're in.

For example, if you have:

<span class="glyphicon glyphicon-adjust"></span>

In the css that customizes your bootstrap, simply add:

.glyphicon {font-size: 1.25 em;}

This will scale the glyphs.

Answer 11

Try including class lead

<span class="glyphicon glyphicon-home lead"></span>

Or rap it inside a <h4> tag