How to Add Colors to Bootstrap Icons with CSS

Using icons is great for every website as they provide easy visual information. But what if you want to change the Bootstrap icons' standard colors? Fortunately, CSS allows us to style them. So, this can be done with the CSS color property. You can also change the font-size.

In this snippet, we’ll demonstrate how to do this step by step. Start with creating HTML.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use an <h1> element for the title, and <span> elements for the icons.
  • To import the icon, in the <head> section, use a <link> element with the rel and href attributes.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  </head>
  <body>
    <h1>Example</h1>
    <span class="glyphicon glyphicon-heart icon-green"></span>
    <span class="glyphicon glyphicon-star icon-large"></span>
    <span class="glyphicon glyphicon-th icon-red"></span>
  </body>
</html>

Add CSS

  • Specify the text-align property for the <body> element.
  • Set the display to “inline-block” and specify the padding for the <span> element.
  • Set the color property for the "icon-green" and "icon-red", separately.
  • Set the font-size of the "icon-large".
body {
  text-align: center;
}

span {
  display: inline-block;
  padding: 10px 20px;
}

.icon-green {
  color: green;
}

.icon-red {
  color: red;
}

.icon-large {
  font-size: 25px;
}

Now, we can see the full code.

Example of adding color to Bootstrap icons:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
      body {
        text-align: center;
      }
      span {
        display: inline-block;
        padding: 10px 20px;
      }
      .icon-green {
        color: green;
      }
      .icon-red {
        color: red;
      }
      .icon-large {
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h1>Example</h1>
    <span class="glyphicon glyphicon-heart icon-green"></span>
    <span class="glyphicon glyphicon-star icon-large"></span>
    <span class="glyphicon glyphicon-th icon-red"></span>
  </body>
</html>

In our example, three icons are used. We changed the color of two icons and the font size of one icon.