Bootstrap su Twitter - Come ottenere il glyphicon grigio

Question

Sto usando twitter bootstrap e ho una domanda sul glyphicon usato nella loro home page. Per riferimento, prendere la pagina CSS di base: http://twitter.github.com/bootstrap/base-css.html

Sul lato sinistro, è possibile visualizzare la navigazione - Tipografia, codice, tabelle e simili. Ora, se si nota, la navigazione contiene il glyphicon identificato dalla classe "icon-chevron-right". Tuttavia, l'icona non è in bianco o nero. È grigio. Quando il mouse passa sopra un particolare oggetto, l'icona diventa di una tonalità di grigio più scura. Il CSS non mostra nulla fuori dall'ordinario e sembra riferirsi al glyphicon nero, tuttavia l'icona è grigia e ha un effetto hover.

Qualche idea su quale funzione di bootstrap viene utilizzata qui?

Answer 1

Questo è effettivamente impostato utilizzando la proprietà opacità CSS. Il loro codice:

.bs-docs-sidenav .icon-chevron-right { 
float: right; 
margin-top: 2px; 
margin-right: -6px; 
opacity: .25; 
} 

Questo cambiamento al passaggio del mouse a una maggiore opacità per renderlo più scuro. In realtà è solo l'icona nera.

Quindi, qualcosa di simile:

.class > i { 
    opacity: 0.25; 
} 

.class:hover > i { 
    opacity: 0.5; 
} 

Answer 2

Se stai usando le icone in Bootstrap - dare un'occhiata a font-awesome troppo (costruito per l'uso con bootstrap), dove si ha il controllo completo di in termini di scala, posizionamento, colore, opacità ecc

Answer 3

ho creare questa css per i miei legami con le icone

.icon-grey-link { 
    opacity:0.5; 
    filter:alpha(opacity=50); /* For IE8 and earlier */ 
} 
a:hover > i.icon-grey-link { 
    opacity:1; 
    filter:alpha(opacity=100); /* For IE8 and earlier */ 
} 

ed è applicato in classe per i elemento

Answer 4

Invece di giocare con l'opacità dovresti invece sfruttare il glyphicon come font e trattarlo come tale.

.text-grey { 
    color: grey; 
} 

<span class="glyphicon glyphicon-search text-grey"></span> 

Oppure utilizzare la classe di bootstrap progettato per fare questo: .text-muted

<span class="glyphicon glyphicon-search text-muted"></span>