Glyphicons più grandi

212

Come faccio a creare Glyphicons più grandi in Twitter Bootstrap 3.0 (non 2.3.x).

Questo codice renderà grandi i miei glifi:

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

Come posso ottenere questa dimensione senza usare la classe btn-lg usando solo un intervallo?

Questo dà un piccolo glifo:

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

— guiomie
fonte

372

Puoi semplicemente dare al glifo una dimensione del carattere a tuo piacimento:

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

grande! Nel mio caso, avevo un input-group-btn con un pulsante, e questo pulsante era un po 'più grande. Quindi ho appena dato "font-size: 95%" per il mio glyphicon ed è stato risolto.

— victorf,

41

Ecco come lo faccio:

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

Ciò ti consente di modificare le dimensioni al volo. Funziona meglio per i requisiti ad hoc per modificare le dimensioni, piuttosto che cambiare il CSS e farlo applicare a tutti.

— Randy Greencorn
fonte

2

In generale gli stili in linea non sono un buon approccio. Se hai bisogno di stili specifici per alcuni componenti, applica la nuova dimensione del carattere tramite la relativa classe genitore

— Kaloyan Stamatov,

a volte è una tantum e non si può essere disturbati però

— Matthew Lock

29

La .btn-lgclasse ha il seguente CSS in Bootstrap 3 ( link ):

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

Se applichi lo stesso font-sizee line-heightal tuo intervallo (uno .glyphicon-linko uno appena creato .glyphicons-lgse intendi utilizzare questo effetto in più di un'istanza), otterrai un Glyphicon delle stesse dimensioni del pulsante grande.

— Angelique
fonte

4

l'aggiunta della btn-lgclasse è un'opzione molto più semplice. Buona risposta!

— Neel,

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>

Espandi frammento

— barış çıracı
fonte

2

Nel mio caso, ho avuto un input-group-btncon un button, e questo buttonera un po 'più grande del suo contenitore. Quindi ho appena dato il font-size:95%mio glyphicon ed è stato risolto.

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

2

Scrivi il tuo in <h1>o <h2>:

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

— silenzioso
fonte

0

Se stai usando bootstrap 3, usa il tag, in questo modo Funziona perfettamente con Bootstrap 3.
Puoi anche usare più tag per ridurre le dimensioni.
Codice:


— Valynk
fonte

Questo è esattamente l'opposto della domanda ... a meno che non si ignori gli stili, questo lo renderà piccolo. Ho usato quel tag per il suo scopo esatto l'altro giorno.

— Richard Barker,