Я использую twitter bootstrap, и у меня есть вопрос о глификоне, который используется на их домашней странице. Для справки возьмите базовую страницу CSS: http://twitter.github.com/bootstrap/base-css.html
С левой стороны вы можете увидеть навигацию - типографию, код, таблицы и т.д. Теперь, если вы заметили, навигация содержит глификон, идентифицированный классом "icon-chevron-right". Однако значок не черный или белый. Он серый. Когда мышь нависает над определенным элементом, значок превращается в более темный оттенок серого. CSS не показывает ничего необычного и, кажется, ссылается на черный глификон, но значок серый и имеет эффект зависания.
Любая идея, какая функция бутстрапа используется здесь?
Это фактически устанавливается с использованием свойства непрозрачности 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;
}
Вместо того, чтобы играть с непрозрачностью, вместо этого вы должны использовать глификон, являющийся шрифтом, и рассматривать его как таковой.
.text-grey {
color: grey;
}
<span class="glyphicon glyphicon-search text-grey"></span>
Или используйте класс bootstrap, предназначенный для этого: .text-muted
<span class="glyphicon glyphicon-search text-muted"></span>
Если вы используете значки в Bootstrap - посмотрите font-awesome тоже (построенный для использования с bootstrap), где у вас есть полный контроль с точки зрения масштаба, размещения, цвета, непрозрачности и т.д.
Я создал этот 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>