Bigger Glyphicons

How Do I Make Glyphicons Bigger? (Change Size?)

Increase the font-size of glyphicon to increase all icons size.

.glyphicon {
    font-size: 50px;
}

To target only one icon,

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

Bigger Glyphicons

You can just give the glyphicon a font-size to your liking:

span.glyphicon-link {
    font-size: 1.2em;
}

How to reduce the size of the glyphicon in boostrap

You can use inline style format to adjust font size for specific glyphicon elements

 <button>
       <span style="font-size:12px" class="glyphicon glyphicon-search"></span> Search
   </button>

Increase the size of Bootstrap 2.3's Glyphicons

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.

Twitter bootstrap bigger glyphicons.

If it's Bootstrap 3, then try increasing the font-size if it applies to the element. Example below.

glyphicon.myclass {
    font-size: 1.4em;
}

Twitter Bootstrap - Making CSS Icons bigger

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 Topics