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   lt i gt   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

User · Answer

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

User · Answer

It is actually very easy   just use    icon-name  color   0C0     For example    icon-compass  color   C30     That s it

User · Answer

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

User · Answer

Because the glyphicons are now fonts  one can use the contextual classes to apply the appropriate color to the icons   For example   lt span class  glyphicon glyphicon-info-sign text-info  gt  lt  span gt  adding text-info to the css will make the icon the info blue color

User · Answer

This is all a bit roundabout    I ve used the glyphs like this     lt  div gt           lt div class  span2  gt               lt span class  glyphicons thumbs up  gt  lt i class  green  gt  lt  i gt  lt  span gt           lt  div gt           lt div class  span2  gt               lt span class  glyphicons thumbs down  gt  lt i class  red  gt  lt  i gt  lt  span gt           lt  div gt    and to affect the color  i included a bit of css at the head like this   lt style gt          i green before               color  green                    i red before               color  red                 lt  style gt    Voila  green and red thumbs

User · Answer

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    lt i class  social-icon linkedin small  style  border-radius 7 5px height 15px width 15px background-color white  gt  lt  i gt   lt i class  social-icon facebook small  style  border-radius 7 5px height 15px width 15px background-color white  gt  lt  i gt    This is very similar to  frbl  s sneaky answer  yet it does not use another image  Instead  this sets the background-color of the  lt i gt  element to white and uses the CSS property border-radius to make the entire  lt i gt  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  lt i gt  element circular

User · Answer

Also works with the style tag    lt span class  glyphicon glyphicon-ok  style  color  00FF00   gt  lt  span gt    lt span class  glyphicon glyphicon-remove  style  color  FF0000   gt  lt  span gt

User · Answer

The Bootstrap Glyphicons are fonts  This means it can be changed like any other text through CSS styling   CSS    lt style gt      glyphicon-plus          color   F00         lt  style gt    HTML    lt span class  glyphicon glyphicon-plus  gt  lt  span gt    Example    lt  doctype html gt   lt html gt   lt head gt   lt title gt Glyphicon Colors lt  title gt   lt link href  css bootstrap min css  rel  stylesheet  gt   lt style gt      glyphicon-plus           color   F00            lt  style gt   lt  head gt    lt body gt       lt span class  glyphicon glyphicon-plus  gt  lt  span gt   lt  body gt   lt  html gt     Watch the course Up and Running with Bootstrap 3 by Jen Kramer  or watch the individual lesson on Overriding core CSS with custom styles

User · Answer

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

User · Answer

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

User · Answer

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  gt   active  gt  a  gt   class   icon-     nav-pills  gt   active  gt  a  gt   class    icon-     nav-list  gt   active  gt  a  gt   class   icon-     nav-list  gt   active  gt  a  gt   class    icon-     navbar-inverse  nav  gt   active  gt  a  gt   class   icon-     navbar-inverse  nav  gt   active  gt  a  gt   class    icon-     dropdown-menu  gt  li  gt  a hover  gt   class   icon-     dropdown-menu  gt  li  gt  a hover  gt   class    icon-     dropdown-menu  gt   active  gt  a  gt   class   icon-     dropdown-menu  gt   active  gt  a  gt   class    icon-     dropdown-submenu hover  gt  a  gt   class   icon-     dropdown-submenu hover  gt  a  gt   class    icon-       background-image  url    iconMagentaSpritePath         And use it like this    lt i class  icon-chevron-down icon-magenta  gt  lt  i gt    Hope it helps someone

User · Answer

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    lt span class  label-important label  gt  lt i class  icon-remove icon-white  gt  lt  i gt  lt  span gt   lt span class  label-success label  gt  lt i class  icon-ok icon-white  gt  lt  i gt  lt  span gt

User · Answer

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

User · Answer

You can change color globally as well  i e     glyphicon          color   008cba

[css] Can I add color to bootstrap icons only using CSS?

Examples related to css

Examples related to twitter-bootstrap

Examples related to sprite

Examples related to css-sprites