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

Using different units of measurement

Let's get a bit more specific. You can use different units in CSS, because, well... size matters. You can resize glyphicons using px, em, rem, pt, vw, vh. And dare I say... %?

.glyphicon {
    font-size: 48px;  /* Designer: "Make that icon precisely 48px!" */
}
/* OR */
.glyphicon {
    font-size: 3em;  /* UX: "Make it relative, it's about the experience!" */
}


Sass it up with CSS classes

Make your own scalable CSS classes, such as gi-5x. It's like building your very own Fontawesome from scratch, but with less code writing:

.gi-5x {
    font-size: 5em;  /* Like Popeye's spinach for your icons */
}


Just tag class="gi-5x" to your span and enjoy the 5 times larger icon!

Lock and load glyphicons in Bootstrap

Want to rescale icons inside your headers or jumbotron? Bootstrap has your back:

<h1><span class="glyphicon glyphicon-search"></span> Search</h1>  /* Icon acting like it's on steroids */


This nifty technique ensures the glyphicon inherits the wrapping element's size. You can sit back and enjoy the show.☕

Gotcha! Handle glyphicons with care

Avoid the pitfall if glyphicon is hiding within parent elements such as buttons or input groups. They might override your size alterations:

<button class="btn btn-default">
    <span class="glyphicon glyphicon-plus gi-5x"></span>  /* "I'm on a diet, font-size doesn't apply to me!" */
</button>


Ensure parent styles don't impede your scaling strategy.

Faster, Better, Stronger with Font Awesome

Thinking of switching to Font Awesome? They've got an arsenal of built-in size classes, just waiting to get picked. Meet fa-lg, fa-2x, fa-3x, and so on.

<i class="fa fa-star fa-3x"></i>  /* "Look ma, I'm thrice the size!" */


Quick auf wiedersehen with inline CSS

Need a quick fix? Show `em what you've got with inline styles:

<span class="glyphicon glyphicon-envelope" style="font-size: 80px;"></span> /* "I can tell by the pixels..." */


While certainly not a permanent solution, it is a great road-side assistance!