Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2
Solution 1
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>
Solution 2
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.
Solution 3
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)
Solution 4
For bootstrap 3.0, this worked for me:
.myclass .glyphicon {color:blue !important;}
Solution 5
You can do this as well, hopeit helps
<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
Related videos on Youtube
![Mike Phils](https://i.stack.imgur.com/zwQ4Q.jpg?s=256&g=1)
Mike Phils
Javacript | ES6 | HTML5. I am interested in solving and helping others in coding.
Updated on November 14, 2020Comments
-
Mike Phils over 3 years
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.
- Can I add color to bootstrap icons only using CSS?
- How do I change Bootstrap 3's glyphicons to white?
Please note: I am using Bootstrap 2.3.2.
-
Martin CR over 3 yearsUPDATE: for BS4 just add 'text-primary' to the class of the icon.
-
Mike Phils almost 11 yearsThanks. I am using Bootstrap /2.3.2/.It is not working for me.
-
Vikas Ghodke almost 11 yearsStill you can use it, delete all the css rules for glyphicon and add this css file netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/… and download the glyphicon fonts from bootstrap 3, this will workout.
-
Maksim Vi. over 10 years@VikasGhodke, that would still require migration of the whole project to version 3.
-
smholloway over 10 yearsThe
icon-white
worked for me with Bootstrap 2. The question asked for blue, but knowing there's a single class for white seems handy. -
wizulus over 10 yearsNewer versions (4.0.3 at the time of this comment) are available at bootstrapcdn.com/#fontawesome_tab
-
USer22999299 over 9 yearswhy to mix oranges with apples? :\
-
itsnikolay over 9 years*
начал работу
isstarted 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. -
Terix almost 9 yearsI find it very appropriate if the icon must be shown exacly because there have been a success in the operation.
-
Remus Rusanu over 8 yearsThis is better because the color applied will conform to the current Bootstrap theme color scheme
-
naXa stands with Ukraine over 5 years@naXa try
text-danger
. Here's a full list of colours. -
itsnikolay over 5 years@naXa ty! I fixed the link!