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>

— CoderBryan
fonte

Possibile duplicato di Bigger Glyphicons

— Kevin Workman,

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

— VenomVendor
fonte

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>

— Mr. Crowley
fonte

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>

— Ali Adravi
fonte

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>

— Terje Solem
fonte

11

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

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

— Bagus Cahyono
fonte

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

— OpenWebWar
fonte

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>

— Alex Kozlov
fonte