How to Add Color to Bootstrap Icons Only Using CSS

Can I add color to bootstrap icons only using CSS?

Yes, if you use Font Awesome with Bootstrap! The icons are slightly different, but there are more of them, they look great at any size, and you can change the colors of them.

Basically the icons are fonts and you can change the color of them just with the CSS color property. Integration instructions are at the bottom of the page in the provided link.

Edit: Bootstrap 3.0.0 icons are now fonts!

As some other people have also mentioned with the release of Bootstrap 3.0.0, the default icon glyphs are now fonts like Font Awesome, and the color can be changed simply by changing the color CSS property. Changing the size can be done via font-size property.

Change Bootstrap icon color

You should add style to i tag

<i style = "color:blue;" class="material-icons"></i>

also, you can create a css class

.blue {
    color:blue
}

and then just add that class to a tag

<i class="material-icons blue"></i>

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

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>

How to change color of bootstrap glyphicon?

Use color

 <button type="button" 
      class="btn btn-info btn-lg" ng-click="serverFiles()"
      style="margin-left: 10px; color:#FF0000;">
          <span class="glyphicon glyphicon-folder-close"></span></button>

But remember that it is desirable to avoid the use of inline style is better use classes or references based on external css configuration items

 <button type="button" 
      class="btn btn-info btn-lg mybtn-blue" ng-click="serverFiles()"
      style="margin-left: 10px;">
          <span class="glyphicon glyphicon-folder-close"></span></button>

edn for external css

.mybtn-blue {
   color: blue;
}

Bootstrap 5 - colored border on icons

What about putting the icons inside of a container that you could then apply background color and border-radius attributes to and style them appropriately to match the icon:

body {
  background-color: grey;
}

.diceContainer {
  display: block;
  background-color: white;
  padding: 0.2em;
  margin: 0;
  width: 10em;
  height: 10em;
  border-radius: 2em;
}

.bi-dice-5-fill {
  display: block;
  padding: 0;
  margin: auto;
  color: black;
  font-size: 10em;
  line-height: 0;
}

<!DOCTYPE html>
<html>

  <head>
    <title>BootStrap Icons</title>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css'>
  </head>

  <body>
    <div class="diceContainer">
      <i class='bi bi-dice-5-fill'></i>
    </div>
  </body>

</html>

Can I change the color of Font Awesome's cog icon?

This worked for me:

.icon-cog {
  color: black;
}

For versions of Font Awesome above 4.7.0, it looks this:

.fa-cog {
  color: black;
}

How to use CSS to change icon color

Assuming that every icon should have the color defined by the status container, you can do this:

.message-status {
    padding:18px 24px;
    margin:0 0 24px;
    border-radius:4px;
    color:#fff;
    h2 { margin-top:0; }

    &.status1 { 
        background:#35c671; 
        .glyphicon { color: #001; }
    }
    &.status2 { 
        background:#565a5c; 
        .glyphicon { color: #002; }
    }
    // etc ...
}

How to style icon color, size, and shadow of FontAwesome Icons

Given that they're simply fonts, then you should be able to style them as fonts:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

Change icon-bar (☰) color in bootstrap

The reason your CSS isn't working is because of specificity. The Bootstrap selector has a higher specificity than yours, so your style is completely ignored.

Bootstrap styles this with the selector: .navbar-default .navbar-toggle .icon-bar. This selector has a B specificity value of 3, whereas yours only has a B specificity value of 1.

Therefore, to override this, simply use the same selector in your CSS (assuming your CSS is included after Bootstrap's):

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}