Twitter Bootstrap - How to get the grey glyphicon

twitter-bootstrap glyphicons
callmekatootie picture callmekatootie · Mar 14, 2013 · Viewed 21.8k times · Source

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

Snæbjørn picture Snæbjørn · Jul 15, 2014

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>

Related questions

Add Bootstrap Glyphicon to Input Box

How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:

Read More
How Do I Make Glyphicons Bigger? (Change Size?)

I would like to make the globe glyphicon bigger so that it covers up a large portion of the page (it's a vector image). It's not in a button or anything; it's just alone. Is there a way to do …

Read More
Bigger Glyphicons

How do I make bigger Glyphicons in twitter bootstrap 3.0 (not 2.3.x). This code will make my glyphicons big: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-th-list"> </span> </button> How …

Read More