Come posso ingrandire i glifi? (Cambia dimensione?)


239

Vorrei ingrandire il globo glyphicon in modo che copra una grande parte della pagina (è un'immagine vettoriale). Non è in un pulsante o altro; è solo. C'è un modo per fare questo?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>  

Possibile duplicato di Bigger Glyphicons
Kevin Workman,

Risposte:


367

Aumenta la dimensione del carattere di glyphiconper aumentare la dimensione di tutte le icone.

.glyphicon {
    font-size: 50px;
}

Per scegliere come target solo un'icona,

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

2
Ha funzionato! (Lo accetterò tra 5 minuti (è il tempo rimasto)) C'è un modo per centrarlo? @VenomVendor
CoderBryan,

2
text-centersul div.
Aibrean,

7
per ingrandire "su richiesta" il glyphicon usa .glyphicon.larger {font-size: 150%; }
user216661

Che ne dici di renderlo più sottile?
Nofel,

Ho dovuto aggiungere !important;la dimensione del carattere per sovrascrivere il CSS di boostrap.
Nel frattempo,

143

Fontawesome ha una soluzione perfetta per questo.

Ho implementato lo stesso. solo sul tuo file .css principale aggiungi questo

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

Nel tuo esempio non ti resta che farlo.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>  

Bello! Puoi anche usare importi frazionari come 1.5em.
Mike Taverne,

Molto meglio della risposta accettata e mostra una soluzione generica a un problema ricorrente.
Adam,

71

Se stai usando bootstrap e font-awesome allora è facile, non c'è bisogno di scrivere una singola riga di nuovo codice, basta aggiungere fa-Nx, quanto vuoi, Vedi la demo

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>

Glifi e Font-Awesome uniscono le forze!
Timo,

Non sono favorevole a combinare FA e glifi. Vedi sotto la risposta su come ingrandire il glyphicon usando lo stile inline o tramite una classe css sopra. O per una soluzione FA pura utilizzare -> fa fa-globe fa-2x (
v4.x

MarcoZen: comunque dalla prossima versione di bootstrap 4 Glyphicons verrà rimosso, molti di noi prima usavano insieme.
Ali Adravi,

17

Sì, e in pratica puoi anche usare lo stile in linea:

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>

11

prova a usare l'intestazione, senza bisogno di extra CSS

<h1 class="glyphicon glyphicon-plus"></h1>

2
Puoi farlo, ma non ti dà un buon livello di controllo come farebbe un po 'di CSS.
Matt

6
L'uso delle intestazioni a causa del loro effetto sulla dimensione del carattere è un anti-pattern. Un utente che naviga nel tuo sito con la tastiera verrebbe inviato direttamente alla tua icona poiché lo screen reader presuppone che significhi un titolo / intestazione per il contenuto più importante della pagina.
Roy,

9

Per es. Aggiungi classe:

btn-lg - LARGE

btn-sm - PICCOLO

btn-xs - Molto piccolo

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

Link di riferimento Bootstrap: Glyphicons Bootstrap


7
La domanda riguardava le immagini, non le immagini come pulsanti.
user216661

0

Per questo ho usato le classi di intestazione bootstrap ("h1", "h2", ecc.). In questo modo ottieni tutti i vantaggi dello stile senza utilizzare i tag effettivi. Ecco un esempio:

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>

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.