Can I add color to bootstrap icons only using CSS?

Twitter's bootstrap uses Icons by Glyphicons. They are "available in dark gray and white" by default:

Is it possible to use some CSS trickery to change the colors of the icons? I was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color.

I know you can change the background color of the enclosing (<i>) element, but I'm talking about the icon foreground color. I guess it would be possible to inverse the transparency on the icon image and then set the background color.

So, can I add color to bootstrap icons only using CSS?

Solution 1:

Yes, if you use Font Awesome with Bootstrap! The icons are slightly different, but there are more of them, they look great at any size, and you can change the colors of them.

Basically the icons are fonts and you can change the color of them just with the CSS color property. Integration instructions are at the bottom of the page in the provided link.

Edit: Bootstrap 3.0.0 icons are now fonts!

As some other people have also mentioned with the release of Bootstrap 3.0.0, the default icon glyphs are now fonts like Font Awesome, and the color can be changed simply by changing the color CSS property. Changing the size can be done via font-size property.

Solution 2:

With the latest release of Bootstrap RC 3, changing the color of the icons is as simple as adding a class with the color you want and adding it to the span.

Default black color:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

would become

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

CSS

.icon-success {
    color: #5CB85C;
}

Bootstrap 3 Glyphicons List

Solution 3:

Because the glyphicons are now fonts, one can use the contextual classes to apply the appropriate color to the icons.

For example: <span class="glyphicon glyphicon-info-sign text-info"></span> adding text-info to the css will make the icon the info blue color.

Solution 4:

Another possible way to have bootstrap icons in a different color is to create a new .png in the desired color, (eg. magenta) and save it as /path-to-bootstrap-css/img/glyphicons-halflings-magenta.png

In your variables.less find

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

and add this line

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

In your sprites.less add

/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .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-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url("@{iconMagentaSpritePath}");
}

And use it like this:

<i class='icon-chevron-down icon-magenta'></i>

Hope it helps someone.

Solution 5:

Quick and dirty work around which did it for me, not actually coloring the icon, but surrounding it with a label or badge in the color you want;

<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>