Mike Phils Mike Phils - 3 days ago 5
HTML Question

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.

Answer

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>
Comments