Le icone di bootstrap (Glyphicons) sono posizionate leggermente in alto quando si utilizza Google Fonts, come posso risolvere il problema?

Question

Se posso aggiungere il seguente Google Fonts nel tag head del documento

<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet"> 

icone Bootstrap (Glyphicons) sono posizionati leggermente verso l'alto, come si può vedere a questo link: http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png

Come posso risolvere questo problema?

Answer 1

ho usato i CSS come questo con Bootstrap in passato:

[class^="icon-"] { 
margin-top: 3px; 
} 

solo giocare con il margin-top fino a che non guarda a destra.

Buona fortuna!

Answer 2

Non penso che il problema riguardi il carattere di Google ma invece la combinazione di dimensione carattere e allineamento verticale. La dimensione carattere predefinita dell'icona in Bootstrap è 14px e nella dichiarazione per icon- abbiamo vertical-align: text-top;, vedere il codice qui sotto.

[class^="icon-"], 
[class*=" icon-"] { 
    display: inline-block; 
    width: 14px; 
    height: 14px; 
    margin-top: 1px; 
    *margin-right: .3em; 
    line-height: 14px; 
    vertical-align: text-top; 
    background-image: url("../img/glyphicons-halflings.png"); 
    background-position: 14px 14px; 
    background-repeat: no-repeat; 
} 

Nel vostro pulsante "Dashboard" Sembra che il font-size è più grande di 14px, forse 22px? Una soluzione potrebbe essere quella di creare un selettore alternativo/estensione per il pulsante e cambiare vertical-align-baseline:

[class^="icon-"] .my-class, 
[class*=" icon-"] .my-class { 
    vertical-align: baseline; 
} 

Ma ricordate che il centro visivo dipende la parola; "Dashboard", ad esempio, non ha discendenti (per ulteriori informazioni su the anatomy of typography). Se baseline non sembra buono, prova alcuni degli altri, vedi specification here.

La soluzione suggerita da @ user1751766 è anche possibile. Ma suggerisco di .my-class di adattare questa dichiarazione alternativa dalla dichiarazione di default di Bootstrap.

Answer 3

Vai Bootstrap.css

.glyphicon { 
    position: relative; 
    top: 11px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    -webkit-font-smoothing: antialiased; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 

Mess con top fino ad allinearlo nel modo che preferite. 11px ha funzionato per me sul cuore, ma potrebbe dipendere da quale icona/come stai cercando di usarlo. Basta armeggiare fino a quando non sembra bello.

Answer 4

questo ha funzionato bene per me:

span.glyphicon { 
    vertical-align: middle; 
    margin-top: -5px; 
}