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    Can I add color to bootstrap icons only using CSS  How do I change Bootstrap 3  39 s glyphicons to white    Please note  I am using Bootstrap 2 3 2

User · Answer

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

User · Answer

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

User · Answer

CSS    blue-icon  color blue  important      HTML   lt i class  fa fa-wrench blue-icon  gt  lt  i gt    Glyphicons are removed in 4 0  i recommend Font-awesome 4 or newer

User · Answer

For bootstrap 3 0  this worked for me    myclass  glyphicon  color blue  important

User · Answer

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       lt p style  color green  gt Time icon   lt span class  glyphicon glyphicon-time   gt  lt  span gt  lt  p gt

User · Answer

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    lt i class  fa fa-tag text-danger  aria-hidden  true  gt  lt  i gt

User · 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    lt link href  http   netdna bootstrapcdn com font-awesome 3 2 1 css font-awesome css  rel  stylesheet  gt    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   lt p gt  lt i class  icon-camera-retro icon-large brown  gt  lt  i gt  icon-camera-retro lt  p gt   lt  --brown class added-- gt   lt p gt  lt i class  icon-camera-retro icon-2x  gt  lt  i gt  icon-camera-retro lt  p gt   lt p gt  lt i class  icon-camera-retro icon-3x  gt  lt  i gt  icon-camera-retro lt  p gt   lt p gt  lt i class  icon-camera-retro icon-4x  gt  lt  i gt  icon-camera-retro lt  p gt

User · Answer

You can do this as well  hopeit helps   lt span style  color black  gt  lt i class  glyphicon glyphicon-music  gt  lt  i gt  lt  span gt

User · Answer

Yes  you can set the icons to the white color   here is how it worked for me   Bootstrap  lt 3  HTML   lt i class  icon-ok icon-white  gt  lt  i gt    This would make your icon appear white

User · Answer

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    lt span class  glyphicon glyphicon-user  style  color blue  gt  lt  span gt    Or you can add it as a class to your icon and then set the font color to it in CSS  HTML    lt span class  glyphicon glyphicon-search  gt  lt  span gt   lt span class  glyphicon glyphicon-user blue  gt  lt  span gt   lt span class  glyphicon glyphicon-trash  gt  lt  span gt    CSS   blue       color  blue      This fiddle has an example

User · Answer

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    lt i class  icon features-icon icons8-collaboration-2 text-primary  gt  lt  i gt   lt i class  icon features-icon icons8-collaboration-2 text-secondary  gt  lt  i gt

User · Answer

Simply apply Twitter Bootstrap  text-success class on Glyphicon    lt span class  glyphicon glyphicon-play text-success  gt              lt  span gt      Full list of available colors  Bootstrap Documentation  Helper classes   Blue is present also

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

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-2