How to Change Bootstrap 3's Glyphicons to White

How do I change Bootstrap 3's glyphicons to white?

You can just create your own .white class and add it to the glyphicon element.

.white, .white a {
  color: #fff;
}

<i class="glyphicon glyphicon-home white"></i>

How can I change the color of a Bootstrap 3 glyphicon to white if it's not included in the glyphicon package?

As commenters have said, you can't alter the colour of an image with css.

I'd be inclined to switch from the glyphicons to the (awsome) fontawsome which you can find here: http://fontawesome.io

It works in much the same way as the glyphicon set and has many more icons for free.

This should do what you want once you have included the fontawsone file, which is also available on CDNs as well as direct download:

<i class="fa fa-unlock"></i>

As a bonus, as well as being ale to set the colourwith css, there are also classes to get different sizes: http://fontawesome.io/icon/unlock/

Hope this helps

How to change color of bootstrap glyphicon?

Use color

 <button type="button" 
      class="btn btn-info btn-lg" ng-click="serverFiles()"
      style="margin-left: 10px; color:#FF0000;">
          <span class="glyphicon glyphicon-folder-close"></span></button>

But remember that it is desirable to avoid the use of inline style is better use classes or references based on external css configuration items

 <button type="button" 
      class="btn btn-info btn-lg mybtn-blue" ng-click="serverFiles()"
      style="margin-left: 10px;">
          <span class="glyphicon glyphicon-folder-close"></span></button>

edn for external css

.mybtn-blue {
   color: blue;
}

Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2

Finally I found answer myself. To add new icons in 2.3.2 bootstrap we have to add Font Awsome css in you file. After doing this we can override the styles with css to change the color and size.

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

.brown{color:#9b846b}

If we want change the color of icon then just add brown class and icon will turn in brown color. It also provide icon of various size.

HTML

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

How to change bootstrap glyphicon color in jquery

If you're really willing to do it through javascript:

First option, listens to click on the icon

jQuery(document).ready(function($){
    $('.glyphicon-ok').on("click", function(){
        $(this).css("color", "#FFF000");
    });
});

Demo at: http://jsfiddle.net/T9Dk9/1/

Second option listens to click on the li element:
Add class to the li (not essential, but easier in bigger projectes):

<li class="active clickable">

jQuery(document).ready(function($){
    $('.clickable').on("click", function(){
        $(this).find('.glyphicon').css("color", "#FFF000");
    });
});

http://jsfiddle.net/T9Dk9/2/

But I guess there will be a method in Bootstrap do define a 'clicked' color for links

Switch to glyphicons-white on hover with bootstrap

If you only have to add one class to your image with bootstrap, I'd suggest you to use jQuery to add the class on hover and remove to class on mouseOut. How? Here's a good way :

    $("yourSelector").hover(
       function () {
         $(this).toggleClass('datWhiteClass');
       }, 
      function () {
          $(this).toggleClass('datWhiteClass');
       }
     );

In this case, the first function is what happen on the mouseover and the second when the hover state is not true anymore!
Hope it helped!

Changing background color of glyphicon in Bootstrap

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