Twitter Bootstrap - Jak zdobyć szary glif?

Question

Używam Twittera bootstrap i mam pytanie na glifphicon używane na ich stronie głównej. Dla odniesienia, weź stronę Base CSS: http://twitter.github.com/bootstrap/base-css.html

Po lewej stronie widać Nawigację - typografię, kod, tabele i tym podobne. Teraz, jeśli zauważysz, nawigacja zawiera glifotyp zidentyfikowany przez klasę "icon-chevron-right". Jednak ikona nie jest czarna ani biała. To jest szare. Kiedy mysz unosi się nad konkretnym przedmiotem, ikona zmienia się w ciemniejszy odcień szarości. CSS nie pokazuje niczego niezwykłego i wydaje się odnosić do czarnego glifotypu, ale ikona jest szara i ma efekt zawisu.

Masz pomysł, która funkcja bootstrap jest tutaj używana?

Answer 1

To jest faktycznie ustawione przy użyciu właściwości nieprzezroczystości CSS. Ich kod:

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

Zmienia się po najechaniu na wyższy stopień krycia, aby było ciemniejsze. W rzeczywistości jest to tylko czarna ikona.

Tak, coś takiego:

.class > i { 
    opacity: 0.25; 
} 

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

Answer 2

Jeśli używasz ikony w Bootstrap - przyjrzeć font-awesome też (zbudowany do użytku z bootstrap), gdzie masz pełną kontrolę pod względem skali, placement, kolor, przezroczystość itp

Answer 3

mam stworzyć ten CSS dla moich powiązań z ikon

.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 */ 
} 

i jest stosowane jako klasy do i elementu

<a href="#"><i class="icon-star icon-grey-link"></i>Star</a> 

Answer 4

Zamiast bawić się z nieprzezroczystością powinieneś wykorzystać gliffon będący czcionką i traktować go jako taki.

.text-grey { 
    color: grey; 
} 

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

Albo użyć klasy bootstrap zaprojektowaną w tym celu: .text-muted

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