Twitter Bootstrap - How to get the grey glyphicon

glyphicons, twitter-bootstrap

Solution

This is actually set using the CSS opacity property. Their code:

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

This changes on hover to a higher opacity to make it darker. It is in reality just the black icon.

So, something like:

.class > i {
    opacity: 0.25;
}

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

Problem

I am using twitter bootstrap and I have a question on the glyphicon used in their home page. For reference, take the Base CSS page: http://twitter.github.com/bootstrap/base-css.html On the left side, you can see the Navigation - Typography, Code, Tables and the like. Now if you notice, the navigation contains the glyphicon identified by the class "icon-chevron-right". However, the icon is not black or white. It is grey. When the mouse hovers over a particular item, the icon turns into a darker shade of grey. The CSS does not show anything out of the ordinary and seems to refer the black glyphicon, yet the icon is grey and has a hover effect. Any idea which feature of bootstrap is being used here?

Original source