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

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

Answer 2

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>

Answer 3

If you're using icons in Bootstrap - take a look at font-awesome too (built for use with bootstrap), where you have complete control of in terms of scale, placement, color, opacity etc.

Answer 4

I've create this css for my links with icons

.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 */
}

and it's applied as class to i element

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