Twitter Bootstrap - Как получить серый глификон

Question

Я использую twitter bootstrap, и у меня есть вопрос о глификоне, который используется на их домашней странице. Для справки, возьмите базовую страницу CSS: http://twitter.github.com/bootstrap/base-css.html

С левой стороны вы можете увидеть навигацию - типографию, код, таблицы и т.п. Теперь, если вы заметили, навигация содержит глификон, идентифицированный классом «icon-chevron-right». Однако значок не черный или белый. Он серый. Когда мышь нависает над определенным элементом, значок превращается в более темный оттенок серого. CSS не показывает ничего необычного и, кажется, ссылается на черный глификон, но значок серый и имеет эффект зависания.

Любая идея, какая функция бутстрапа используется здесь?

Answer 1

Это фактически устанавливается с использованием свойства непрозрачности CSS. Их код:

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

Это изменяется при наведении на более высокую непрозрачность, чтобы сделать его темнее. На самом деле это просто черный значок.

Так, что-то вроде:

.class > i { 
    opacity: 0.25; 
} 

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

Answer 2

Если вы используете иконки в Bootstrap - посмотрите на font-awesome тоже (построен для использования с начальной загрузки), где у вас есть полный контроль с точки зрения масштаба, размещение, цвет, прозрачность и т.д.

Answer 3

Я создать этот CSS для моих связей с иконками

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

и он применяется в качестве класса я элемент

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

Answer 4

Вместо того, чтобы играть с непрозрачностью, вместо этого вы должны использовать глификон, являющийся шрифтом, и рассматривать его как таковой.

.text-grey { 
    color: grey; 
} 

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

Или использовать загрузочный класс, предназначенный для этого: .text-muted

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