Can I add color to bootstrap icons only using CSS?

Question

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?

Answer 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.

Answer 2

I thought that I might add this snippet to this old post. This is what I had done in the past, before the icons were fonts:

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

This is very similar to @frbl 's sneaky answer, yet it does not use another image. Instead, this sets the background-color of the <i> element to white and uses the CSS property border-radius to make the entire <i> element "rounded." If you noticed, the value of the border-radius (7.5px) is exactly half that of the width and height property (both 15px, making the icon square), making the <i> element circular.

Answer 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.

Answer 4

Just use the GLYPHICONS and you will be able to change color just setting the CSS:

#myglyphcustom {
    color:#F00;
}

Answer 5

Use the mask-image property, but it's a bit of a hack. It's demonstrated in the Safari blog here.

It's also described in-depth here.

Basically you'd create a CSS box, with say a background-image: gradient(foo); and then apply an image mask to it based on those PNG images.

It would save you development time making individual images in Photoshop, but I don't think it would save much bandwidth unless you'll be displaying the images in a wide variety of colours. Personally I wouldn't use it because you need to adjust your markup to use the technique effectively, but I'm a member of the "purity is imperitive" school-of-thought.

Answer 6

The accepted answer (using font awesome) is the right one. But since I just wanted the red variant to show on validation errors, I ended using an addon package, kindly offered on this site.

Just edited the url paths in css files since they are absolute (start with /) and I prefer to be relative. Like this:

.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}