Twitter Bootstrap - 如何获取灰色glyphicon

Question

我正在使用twitter bootstrap,我对他们主页中使用的glyphicon有疑问.有关参考,请参阅Base CSS页面:http://twitter.github.com/bootstrap/base-css.html

在左侧,您可以看到导航 - 排版,代码,表格等.现在,如果您注意到,导航包含由"icon-chevron-right"类标识的glyphicon.但是,图标不是黑色或白色.它是灰色的.当鼠标悬停在特定项目上时,图标会变成较暗的灰色阴影.CSS没有显示任何不寻常的东西,似乎引用了黑色glyphicon,但图标是灰色的并且具有悬停效果.

知道引导程序的哪个功能在这里使用？

Answer 1

您应该使用glyphicon作为字体并将其视为一种字体,而不是使用不透明度.

.text-grey {
  color: grey;
}

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

或者使用设计用于执行此操作的引导类: .text-muted

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

Answer 2

这实际上是使用CSS opacity属性设置的.他们的代码:

.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;
}