How can I make Bootstrap icons work on dark background?

twitter-bootstrap css-sprites bootswatch
Wolfram Arnold picture Wolfram Arnold · Apr 22, 2012 · Viewed 10.1k times · Source

I'm using the Bootswatch Cyborg theme of Twitter's Bootstrap library. However, the Cyborg theme has a dark background and light foreground colors, a negative look from the Bootstrap defaults. The icon set PNG assumes a light background, and doesn't show in the Cyborg theme. Is there a corresponding icon set for dark backgrounds? I couldn't find one on Glyphicons' site. Is there an easy trick to turn the icons into the negative color?

Answer

guax picture guax · Apr 22, 2012

Add icon-white class to your bootstrap icon and it will be white on dark.

like:

<i class="icon-search icon-white"></i>

This works for Bootstrap 2 as seen in http://twitter.github.com/bootstrap/base-css.html

Related questions

Can I add color to bootstrap icons only using CSS?

Twitter's bootstrap uses Icons by Glyphicons. They are "available in dark gray and white" by default: Is it possible to use some CSS trickery to change the colors of the icons? I was hoping for some other css3 brilliance that …

Read More
Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More
How to open a Bootstrap modal window using jQuery?

I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form. <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading"&…

Read More