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

Question

I am using the Bootstrap framework for my UI. I want to change the color of my glyphicons to blue, but not in all places. In some places it should use the default color.

Answer 1

Yes, you can set the icons to the white color. here is how it worked for me.

Bootstrap <3

HTML

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

This would make your icon appear white.

Answer 2

The icon will adopt the color from value of the color css property of it's parent.

You can either add this directly to the style:

<span class="glyphicon glyphicon-user" style="color:blue"></span>

Or you can add it as a class to your icon and then set the font color to it in CSS

HTML

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

CSS

.blue {
    color: blue;
}

This fiddle has an example.

Answer 3

Bootstrap >= v4.0 dropped glyphicon support

Dropped the Glyphicons icon font. If you need icons, some options are:

the upstream version of Glyphicons

Octicons

Font Awesome

Source: https://v4-alpha.getbootstrap.com/migration/#components

If you are using Bootstrap >= v4.0 or newer, you can use existing style classes of bootstrap such as text-success,text-warning etc.

For example, if you are using fontawesome:

<i class="fa fa-tag text-danger" aria-hidden="true"></i>

Answer 4

For bootstrap 3.0, this worked for me:

.myclass .glyphicon {color:blue !important;}

Answer 5

Color not work, if you use for bootstrap font png image, as i.

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

HTML5 use css filter to colorize image, example

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);

Answer 6

All previous answers are correct but here is a simple and quick way if you only need one icon in one place to change it's color:

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>