Bigger Glyphicons
CssTwitter BootstrapTwitter Bootstrap-3GlyphiconsCss Problem Overview
How do I make bigger Glyphicons in twitter bootstrap 3.0 (not 2.3.x).
This code will make my glyphicons big:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-th-list">
</span>
</button>
How can I get this size without using the btn-lg class while using only a span ?
This gives a small glyphicon:
<span class="glyphicon glyphicon-link"></span>
Css Solutions
Solution 1 - Css
You can just give the glyphicon a font-size to your liking:
span.glyphicon-link {
font-size: 1.2em;
}
Solution 2 - Css
Here's how I do it:
<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>
This allows you to change size on the fly. Works best for ad hoc requirements to change the size, rather than changing the css and having it apply to all.
Solution 3 - Css
The .btn-lg class has the following CSS in Bootstrap 3 (http://getbootstrap.com/components/#glyphicons">link</a>;):
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
If you apply the same font-size and line-height to your span (either .glyphicon-link or a newly created .glyphicons-lg if you're going to use this effect in more than one instance), you'll get a Glyphicon the same size as the large button.
Solution 4 - Css
<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>
<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>
Solution 5 - Css
In my case, I had an input-group-btn with a button, and this button was a little bigger than its container. So I just gave font-size:95% for my glyphicon and it was solved.
<div class="input-group">
<input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
<div class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
</button>
</div>
</div>
Solution 6 - Css
Write your <span> in <h1> or <h2>:
<h1> <span class="glyphicon glyphicon-th-list"></span></h1>
Solution 7 - Css
If you are using bootstrap 3, use tag, like this <small><span class="glyphicon glyphicon-send"></span></small> It works perfect for Bootstrap 3.
You can even use multiple <small> tags to set the size more smaller.
Code:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>