CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3glyphicons
guiomie
guiomie

Reputation: 5148

Bigger Glyphicons

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>

Upvotes: 211

Views: 244817

Answers (7)

quiet
quiet

Reputation: 21

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

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>

Upvotes: 2

Valynk
Valynk

Reputation: 477

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>

Upvotes: 0

barış &#231;ıracı
barış &#231;ıracı

Reputation: 1043

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

Upvotes: 6

victorf
victorf

Reputation: 1048

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>

Upvotes: 2

Randy Greencorn
Randy Greencorn

Reputation: 3924

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.

Upvotes: 41

Angelique
Angelique

Reputation: 936

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.

Upvotes: 29

user2718994
user2718994

Reputation:

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

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

Upvotes: 371

Related Questions