Changing Background Color Of Glyphicon In Bootstrap

I'm trying to change the background color of a glyphicon upon hover/focus without success in my banner.Below is a code snippet for the 2 glyphicons i.e. glyphicon-user and glyphico

Solution 1:

add !important after the attribute's value

Working demo

.custom-white:hover, 
.custom-white:active,
.custom-white:focus {background-color: yellow !important;}

Solution 2:

Try changing your CSS to this:

.nav>li>a.custom-white:hover, 
.nav>li>a.custom-white:active,
.nav>li>a.custom-white:focus {background-color: yellow;}

See this demo

HTH, -Ted

Solution 3:

Just use the "!important" css feature to override bootstrap's css. For example,

.custom-white:hover, .custom-white:active, .custome-white:focus {background-color: yellow !important;}

Otherwise, the browser will compile bootsrap's default first. Hope that works!

Solution 4:

Try this instead, Just update your nav css lines

.nav>li>a:hover, 
.nav>li>a:active,
.nav>li>a:focus {background-color: yellow;}