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 () 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?

I don't think so... But you could probably do that with javascript and a canvas element. — bfavaretto, Sep 11 '12 at 23:13
@bfavaretto - can you elaborate? do you mean coming up with code / coordinates to draw each of the icons or using the existing png image somehow? — cwd, Sep 11 '12 at 23:18
Sorry, I'm not experienced enough with the canvas element to suggest you code, but I know you can manipulate the pixels individually with a canvas. — bfavaretto, Sep 11 '12 at 23:19

score 189 · Accepted Answer · edited Dec 01 '16 at 16:47

189

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.

edited Dec 01 '16 at 16:47

Stacked

5,676
5
52
69

answered Sep 11 '12 at 23:33

hajpoj

13,053
2
44
62

9

Ahh, clever! Don't forget to set `cursor: default;` so users don't see the I-Bar. Also, check out FF Chartwell, a really clever font: http://tktype.com/chartwell.php – Dai Sep 12 '12 at 00:01
4

When you mouse-over text (like in a word processor) your cursor looks like an oversized capital "`I`" character, it's used for selecting text. In CSS it's referred to as `cursor: text;`. It's also known as "I-beam". – Dai Sep 12 '12 at 01:47

score 38 · Answer 2 · edited Feb 23 '15 at 18:53

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

score 17 · Answer 3 · edited Dec 01 '16 at 17:07

17

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

For example:  adding text-info to the css will make the icon the info blue color.

edited Dec 01 '16 at 17:07

Stacked

5,676
5
52
69

answered May 22 '14 at 20:25

truncie

186
1
4

Thanks was looking for a way to apply the contextual classes. Any of the text-* contextual classes will work – Dustin Hodges Jul 28 '15 at 05:38

score 14 · Answer 4 · answered Nov 12 '12 at 14:25

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.

just wanted to reiterate `I was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color` — cwd, Nov 13 '12 at 16:53
Can't be done purely via CSS that is cross browser compatible too. Usually people need a color scheme with related icons - so I would say upto 5 color sets isn't that much of a challenge. — foxybagga, Mar 09 '13 at 03:56
@seppludger How do you create a new color halfling sprite? Have you succeeded in doing this? I cannot change colors if I load them in any graphics editor. — Norman, May 14 '14 at 04:44

score 7 · Answer 5 · answered Apr 17 '13 at 12:19

7

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>

answered Apr 17 '13 at 12:19

frbl

960
8
13

Your answer was useful,+1.I wanted to use edit icon and want to put yellow color. Can you please tell me how to do that? – Jan 14 '14 at 08:53
Well you could just change the icon-ok to something else; e.g. . For example: . It is better to go for the new bootstrap imo.. – frbl Jan 27 '14 at 11:49

score 6 · Answer 6 · answered Feb 04 '14 at 13:39

The Bootstrap Glyphicons are fonts. This means it can be changed like any other text through CSS styling.

CSS:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

HTML:

<span class="glyphicon glyphicon-plus"></span>

Example:

<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
   .glyphicon-plus {
        color: #F00;    
   }
</style>
</head>

<body>
    <span class="glyphicon glyphicon-plus"></span>
</body>
</html>

Watch the course Up and Running with Bootstrap 3 by Jen Kramer, or watch the individual lesson on Overriding core CSS with custom styles.

score 4 · Answer 7 · answered Aug 28 '13 at 20:17

This is all a bit roundabout..

I've used the glyphs like this

  </div>
        <div class="span2">
            <span class="glyphicons thumbs_up"><i class="green"></i></span>
        </div>
        <div class="span2">
            <span class="glyphicons thumbs_down"><i class="red"></i></span>
        </div>

and to affect the color, i included a bit of css at the head like this

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

Voila, green and red thumbs.

score 4 · Answer 8 · answered Jan 19 '15 at 11:28

4

Also works with the style tag:

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

enter image description here

answered Jan 19 '15 at 11:28

joan16v

4,551
2
44
45

score 3 · Answer 9 · edited Dec 01 '16 at 16:24

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.

Keep in mind support for the `mask-image` property [isn't that great](http://caniuse.com/css-masks). — Scott Bartell, Sep 11 '12 at 23:19

score 3 · Answer 10 · edited Nov 12 '15 at 20:12

3

It is actually very easy:

just use:

.icon-name{
color: #0C0;}

For example:

.icon-compass{
color: #C30;}

That's it.

edited Nov 12 '15 at 20:12

Shadow The Vaccinated Wizard

62,584
26
129
194

answered Aug 28 '13 at 12:33

Aniruddh Dixit

31
1

score 1 · Answer 11 · edited Dec 01 '16 at 15:53

1

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

#myglyphcustom {
    color:#F00;
}

edited Dec 01 '16 at 15:53

Jim

2,817
1
17
29

answered Aug 12 '13 at 13:28

Valter Lorran

108
2
8

score 1 · Answer 12 · answered May 02 '14 at 16:17

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;}

Finally, the one compatible with the old versions of Bootstrap — Dmitry Ginzburg, Feb 21 '17 at 12:11

score 1 · Answer 13 · answered Jul 23 '14 at 17:46

1

You can change color globally as well

i.e.

 .glyphicon {
       color: #008cba; 
   }

answered Jul 23 '14 at 17:46

DmitryBoyko

32,983
69
281
458

score 0 · Answer 14 · answered Nov 10 '14 at 16:23

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  element to white and uses the CSS property border-radius to make the entire  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  element circular.

Can I add color to bootstrap icons only using CSS?

14 Answers14

Linked

Related