8

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?

Sameera Thilakasiri
  • 9,452
  • 10
  • 51
  • 86
Wolfram Arnold
  • 7,159
  • 5
  • 44
  • 64

1 Answers1

17

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

guax
  • 383
  • 3
  • 7
  • Wow, I had totally overlooked that. Thanks for pointing this out! Looks like Bootstrap ships with a white-based icon gallery as well. – Wolfram Arnold Apr 22 '12 at 21:31
  • 1
    Is there a standard way to do the same for the class="close" icon? – NPC Mar 13 '13 at 10:29
  • Assuming you're talking about the .close in modals and still talking about boostrap 2: The x in .close is a font symbol and not a icon. You can set its color by applying a simple color: css rule. – guax Apr 17 '14 at 14:41