CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

Increase the size of Bootstrap 2.3's Glyphicons

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.

Upvotes: 38

Views: 86783

Answers (11)

Sasi Varunan
Sasi Varunan

Reputation: 2864

Try including class lead

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

enter image description here

Or rap it inside a <h4> tag

Upvotes: 0

user2686734
user2686734

Reputation: 719

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

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

Upvotes: 71

David Peters
David Peters

Reputation: 1637

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.

Upvotes: 1

Gabriel
Gabriel

Reputation: 11

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.

Upvotes: 1

Umur Kontacı
Umur Kontacı

Reputation: 35478

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

Upvotes: 32

Rajender Joshi
Rajender Joshi

Reputation: 4205

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.

Upvotes: 10

Dwza
Dwza

Reputation: 6565

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>

Upvotes: 17

itsbalamurali
itsbalamurali

Reputation: 21

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.

Upvotes: 2

kinske
kinske

Reputation: 607

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

Upvotes: 2

dave
dave

Reputation: 64695

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.

Upvotes: 4

cortex
cortex

Reputation: 5226

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!

Upvotes: 2

Related Questions