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>

Risposte:


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.


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.


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>


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>

2

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

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

0

Se stai usando bootstrap 3, usa il tag, in questo modo <small><span class="glyphicon glyphicon-send"></span></small>Funziona perfettamente con Bootstrap 3.
Puoi anche usare più <small>tag per ridurre le dimensioni.
Codice:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>


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,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.