CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-2
Mike Phils
Mike Phils

Reputation: 3505

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

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.

Upvotes: 170

Views: 461411

Answers (12)

Peter Mlich
Peter Mlich

Reputation: 1

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

Upvotes: 0

nikolayp
nikolayp

Reputation: 17919

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)

Upvotes: 203

grepit
grepit

Reputation: 22382

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>

enter image description here

Upvotes: 1

Michael J&#248;rgensen
Michael J&#248;rgensen

Reputation: 23

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 :)

Upvotes: 2

Caner
Caner

Reputation: 59168

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>

Upvotes: 2

White.Raven
White.Raven

Reputation: 31

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>

Upvotes: 3

Eric Uldall
Eric Uldall

Reputation: 2391

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.

Upvotes: 3

puddleglum
puddleglum

Reputation: 1045

For bootstrap 3.0, this worked for me:

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

Upvotes: 7

Vikas Ghodke
Vikas Ghodke

Reputation: 6655

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.

Upvotes: 293

Guven Sezgin Kurt
Guven Sezgin Kurt

Reputation: 1339

You can do this as well, hopeit helps

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

Upvotes: 7

Mike Phils
Mike Phils

Reputation: 3505

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>

Upvotes: 24

A.J.
A.J.

Reputation: 8985

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.

Upvotes: 3

Related Questions