211

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>
guiomie
  • 4,988
  • 6
  • 37
  • 67

7 Answers7

371

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

span.glyphicon-link {
    font-size: 1.2em;
}
  • great! In my case, I had an input-group-btn with a button, and this button was a little bigger. So I just gave "font-size:95%" for my glyphicon and it was solved. – victorf Jan 22 '16 at 17:26
41

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.

Randy Greencorn
  • 3,864
  • 2
  • 22
  • 15
29

The .btn-lg class has the following CSS in Bootstrap 3 (link):

.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.

Angelique
  • 906
  • 7
  • 15
6

<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>
barış çıracı
  • 1,033
  • 14
  • 16
2

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>
victorf
  • 978
  • 2
  • 17
  • 35
2

Write your <span> in <h1> or <h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>
Tunaki
  • 132,869
  • 46
  • 340
  • 423
quiet
  • 21
  • 1
0

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>

Valynk
  • 466
  • 7
  • 7
  • This is the exact opposite of the question... unless you override the styles this will make it small. I just used that tag for its exact purpose the other day. – Richard Barker Jan 30 '18 at 18:09