diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 810a67df3d..584e89549e 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2043,7 +2043,14 @@ table .span24 {
   background-repeat: no-repeat;
 }
 
-.icon-white {
+/* White icons with optional class, or on hover/active states of certain elements */
+
+.icon-white,
+.nav > .active > a > [class^="icon-"],
+.nav > .active > a > [class*=" icon-"],
+.dropdown-menu > li > a:hover > [class^="icon-"],
+.dropdown-menu > li > a:hover > [class*=" icon-"].dropdown-menu > .active > a > [class^="icon-"],
+.dropdown-menu > .active > a > [class*=" icon-"] {
   background-image: url("../img/glyphicons-halflings-white.png");
 }
 
diff --git a/less/sprites.less b/less/sprites.less
index fa0b31da03..6fd2d1da1c 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -25,9 +25,16 @@
   background-image: url("@{iconSpritePath}");
   background-position: 14px 14px;
   background-repeat: no-repeat;
-
 }
-.icon-white {
+
+/* White icons with optional class, or on hover/active states of certain elements */
+.icon-white,
+.nav > .active > a > [class^="icon-"],
+.nav > .active > a > [class*=" icon-"],
+.dropdown-menu > li > a:hover > [class^="icon-"],
+.dropdown-menu > li > a:hover > [class*=" icon-"]
+.dropdown-menu > .active > a > [class^="icon-"],
+.dropdown-menu > .active > a > [class*=" icon-"] {
   background-image: url("@{iconWhiteSpritePath}");
 }
 
@@ -177,15 +184,3 @@
 .icon-filter                  { background-position: -408px -144px; }
 .icon-briefcase               { background-position: -432px -144px; }
 .icon-fullscreen              { background-position: -456px -144px; }
-
-
-
-
-
-
-
-
-
-
-
-