Grotere Glyphicons

Hoe maak ik grotere Glyphicons in Twitter Bootstrap 3.0 (niet 2.3.x).

Deze code maakt mijn glyphicons groot:

<button type="button" class="btn btn-default btn-lg">
   <span class="glyphicon glyphicon-th-list">
   </span>
</button>

Hoe krijg ik deze maat zonderde klasse btn-lg te gebruiken terwijl ik alleeneen span gebruik?

Dit geeft een klein glyphicon:

<span class="glyphicon glyphicon-link"></span>

Antwoord 1, autoriteit 100%

Je kunt de glyphicon gewoon een lettergrootte naar wens geven:

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

Antwoord 2, autoriteit 11%

Zo doe ik het:

<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>

Hiermee kunt u de grootte on-the-fly wijzigen. Werkt het beste voor ad-hocvereisten om de grootte te wijzigen, in plaats van de CSS te wijzigen en deze voor iedereen te laten gelden.

Antwoord 3, autoriteit 8%

De klasse .btn-lgheeft de volgende CSS in Bootstrap 3 (link):

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Als u dezelfde font-sizeen line-heighttoepast op uw span (ofwel .glyphicon-linkof een nieuw aangemaakte .glyphicons-lgals je dit effect in meer dan één instantie gaat gebruiken), krijg je een Glyphicon van hetzelfde formaat als de grote knop.

Antwoord 4, autoriteit 2%

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

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

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