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

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

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

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

Ответ 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;
}

Ответ 2

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

.text-grey {
  color: grey;
}

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

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

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

Ответ 3

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

Ответ 4

Я создал этот 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 */
}

и он применяется как класс к элементу i

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