Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2

Question

I am using the Bootstrap framework for my UI. I want to change the color of my glyphicons to blue, but not in all places. In some places it should use the default color.

I have referred to these two links, but I am not finding anything helpful.

Please note: I am using Bootstrap 2.3.2.

UPDATE: for BS4 just add 'text-primary' to the class of the icon. — Martin CR, Mar 15 '21 at 12:21

score 291 · Answer 1 · edited Jan 20 '15 at 20:45

291

The icon will adopt the color from value of the color css property of it's parent.

You can either add this directly to the style:

<span class="glyphicon glyphicon-user" style="color:blue"></span>

Or you can add it as a class to your icon and then set the font color to it in CSS

HTML

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

CSS

.blue {
    color: blue;
}

This fiddle has an example.

edited Jan 20 '15 at 20:45

DLeh

23,806
16
84
128

answered Aug 20 '13 at 12:32

Vikas Ghodke

6,602
5
27
38

6

Thanks. I am using Bootstrap /2.3.2/.It is not working for me. – Mike Phils Aug 20 '13 at 13:07
1

Still you can use it, delete all the css rules for glyphicon and add this css file http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css and download the glyphicon fonts from bootstrap 3, this will workout. – Vikas Ghodke Aug 20 '13 at 13:11
3

@VikasGhodke, that would still require migration of the whole project to version 3. – Maksim Vi. Jan 03 '14 at 20:05

itsnikolay · Answer 2 · 2018-12-04T14:25:45.540

203

Simply apply Twitter Bootstrap text-success class on Glyphicon:

<span class="glyphicon glyphicon-play text-success">начал работу</span>

enter image description here

Full list of available colors: Bootstrap Documentation: Helper classes
(Blue is present also)

edited Dec 04 '18 at 14:25

answered Sep 01 '14 at 21:38

itsnikolay

17,415
4
65
64

3

why to mix oranges with apples? :\ – USer22999299 Oct 18 '14 at 18:25
7

* `начал работу` is `started a work`. I'd writen the answer on fly and I did not thought that it would be voted high. Thus the screenshot was made in russian from my previous app to show how the markup looked. – itsnikolay Mar 09 '15 at 11:22
3

I find it very appropriate if the icon must be shown exacly because there have been a success in the operation. – Terix Sep 23 '15 at 13:00
6

This is better because the color applied will conform to the current Bootstrap theme color scheme – Remus Rusanu Mar 08 '16 at 13:28
2

@naXa try `text-danger`. Here's a [full list](https://getbootstrap.com/docs/4.0/utilities/colors/) of colours. – naXa stands with Ukraine Oct 19 '18 at 15:02
@naXa ty! I fixed the link! – itsnikolay Oct 24 '18 at 12:14

Mike Phils · Accepted Answer · 2013-11-18T09:50:04.947

Finally I found answer myself. To add new icons in 2.3.2 bootstrap we have to add Font Awsome css in you file. After doing this we can override the styles with css to change the color and size.

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

.brown{color:#9b846b}

If we want change the color of icon then just add brown class and icon will turn in brown color. It also provide icon of various size.

HTML

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

Newer versions (4.0.3 at the time of this comment) are available at http://www.bootstrapcdn.com/#fontawesome_tab — wizulus, Apr 03 '14 at 03:58

score 7 · Answer 4 · answered Aug 19 '14 at 20:55

7

You can do this as well, hopeit helps

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>

answered Aug 19 '14 at 20:55

Guven Sezgin Kurt

1,199
11
13

score 7 · Answer 5 · answered May 19 '15 at 15:25

7

For bootstrap 3.0, this worked for me:

.myclass .glyphicon {color:blue !important;}

answered May 19 '15 at 15:25

puddleglum

1,020
14
19

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

3

I created an alternate colors library for bootstrap 2.3.2 it's available and simple to use for anyone interested in more colors for the old glyphicons library.

edited Dec 01 '16 at 17:02

Stacked

6,892
7
57
73

answered Sep 05 '13 at 07:04

Eric Uldall

2,282
1
17
30

score 3 · Answer 7 · answered Nov 15 '13 at 07:00

3

Yes, you can set the icons to the white color. here is how it worked for me.

Bootstrap <3

HTML

<i class="icon-ok icon-white"></i>

This would make your icon appear white.

answered Nov 15 '13 at 07:00

A.J.

8,557
11
61
89

3

The `icon-white` worked for me with Bootstrap 2. The question asked for blue, but knowing there's a single class for white seems handy. – smholloway Feb 04 '14 at 21:17

score 3 · Answer 8 · edited Oct 22 '17 at 15:27

3

If it is only a bootstrap icon. Note that icons are under text or rather typography. Just add the text color class like this. E.g text-primary, text-info and so on and so forth to the icon class:

<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>

edited Oct 22 '17 at 15:27

Axel

3,331
11
35
58

answered Oct 22 '17 at 15:09

White.Raven

31
1

score 2 · Answer 9 · answered Jan 03 '18 at 04:17

Bootstrap >= v4.0 dropped glyphicon support

Dropped the Glyphicons icon font. If you need icons, some options are:

the upstream version of Glyphicons

Octicons

Font Awesome

Source: https://v4-alpha.getbootstrap.com/migration/#components

If you are using Bootstrap >= v4.0 or newer, you can use existing style classes of bootstrap such as text-success,text-warning etc.

For example, if you are using fontawesome:

<i class="fa fa-tag text-danger" aria-hidden="true"></i>

score 2 · Answer 10 · answered Jan 12 '18 at 13:10

2

CSS:

.blue-icon{
color:blue !important;
}

HTML

<i class="fa fa-wrench blue-icon"></i>

Glyphicons are removed in 4.0, i recommend Font-awesome 4 or newer :)

answered Jan 12 '18 at 13:10

Michael Jørgensen

23
4

score 1 · Answer 11 · answered Jul 29 '18 at 17:38

1

All previous answers are correct but here is a simple and quick way if you only need one icon in one place to change it's color:

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>

answered Jul 29 '18 at 17:38

grepit

21,260
6
105
81

score 0 · Answer 12 · answered Jun 26 '19 at 07:30

Color not work, if you use for bootstrap font png image, as i.

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

HTML5 use css filter to colorize image, example

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);

Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2

12 Answers12

HTML

Linked