Twitter Bootstrap - How to get the grey glyphicon

Question

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?

Answer 1

Instead of playing around with opacity you should instead take advantage of glyphicon being a font and treat it as such.

.text-grey {
  color: grey;
}

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

Or use the bootstrap class designed to do this: .text-muted

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