How to give color to icon in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to give color to icon in bootstrap.

To give color to the icon, put .color: green class to change the color of the icons.

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

Table of contents

  • Includes bootstrap library
  • Includes css in html page
  • Define its class name

Step 1: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    

Step 2: Includes css in html page

Here we are using in 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. color of header.

            body {
            text-align: center;
        }

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

        .icon-green {
            color: green;
            font-size: 25px;
        }

        .icon-red {
            color: red;
            font-size: 25px;
        }

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

        .icon-blue {
            color: blue;
            font-size: 25px;
        }

        .icon-yellow {
            color: yellow;
            font-size: 25px;
        }  

Step 3: Define its class name

Here we will use the bootstrap class to change the color of icons.

    <h1> Color in icon</h1>
    <span class="glyphicon glyphicon-tree-deciduous icon-green"></span>
    <span class="glyphicon glyphicon-home icon-large"></span>
    <span class="glyphicon glyphicon-th icon-red"></span>
    <span class="glyphicon glyphicon-camera icon-blue"></span>
    <span class="glyphicon glyphicon-picture icon-yellow"></span>

Example.

Let’s look at the following example to understand how it basically works:

<!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;
            font-size: 25px;
        }

        .icon-red {
            color: red;
            font-size: 25px;
        }

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

        .icon-blue {
            color: blue;
            font-size: 25px;
        }

        .icon-yellow {
            color: yellow;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <h1> Color in icon</h1>
    <span class="glyphicon glyphicon-tree-deciduous icon-green"></span>
    <span class="glyphicon glyphicon-home icon-large"></span>
    <span class="glyphicon glyphicon-th icon-red"></span>
    <span class="glyphicon glyphicon-camera icon-blue"></span>
    <span class="glyphicon glyphicon-picture icon-yellow"></span>
</body>

</html>

Check the output of the above code example.

Bootstrap, Icon, Color

All the best 👍