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.
This question is related to
html
css
twitter-bootstrap-2
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);
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>
For bootstrap 3.0, this worked for me:
.myclass .glyphicon {color:blue !important;}
Yes, you can set the icons to the white color. here is how it worked for me.
Bootstrap <3
<i class="icon-ok icon-white"></i>
This would make your icon appear white.
Simply apply Twitter Bootstrap
text-success
class on Glyphicon:
<span class="glyphicon glyphicon-play text-success">????? ??????</span>
Full list of available colors: Bootstrap Documentation: Helper classes
(Blue is present also)
Bootstrap >= v4.0 dropped glyphicon support
Dropped the Glyphicons icon font. If you need icons, some options are:
the upstream version of Glyphicons
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>
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.
You can do this as well, hopeit helps
<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
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 :)
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.
Source: Stackoverflow.com