Can I add color to bootstrap icons only using CSS?
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.
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.
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