How to apply custom color to glyphicon icon embed within a link styled with Bootstrap ?

Last Updated : 08 Oct, 2021

Given an HTML document with relevant Bootstrap glyphicon and the task is to apply the custom color to them.

Approach: First, we need to assign the id attribute to the particular glyphicon which you need to customize by using CSS. We can apply the color property to the particular id and change the icon color by using a hex value or normal color.

The id is an attribute that is used to access the whole tag. The color is the property for an element, which is used to change the color of the specific element, it takes the value as a Hex value or color name.

Syntax:

#id_name {
    color: red;
}

Example:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
 
    <style>
        #red_e {
            color: red;
        }
 
        #blue_e {
            color: blue;
        }
 
        #green_e {
            color: green;
        }
 
        #yellow_e {
            color: yellow;
        }
 
        #cyan_e {
            color: cyan;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h2>Glyphicon Icons Styling</h2>
 
        <a href="#">
            <span class="glyphicon glyphicon-envelope" id="red_e">
                Red Envelope Icon</span>
        </a> <br>
 
        <a href="#">
            <span class="glyphicon glyphicon-envelope" id="blue_e">
                Blue Envelope Icon</span>
        </a> <br>
 
        <a href="#">
            <span class="glyphicon glyphicon-envelope" id="green_e">
                Green Envelope Icon</span>
        </a> <br>
 
        <a href="#">
            <span class="glyphicon glyphicon-envelope" id="yellow_e">
                Yellow Envelope Icon</span>
        </a> <br>
 
        <a href="#">
            <span class="glyphicon glyphicon-envelope" id="cyan_e">
                Cyan Envelope Icon</span>
        </a> <br>
    </div>
</body>
 
</html>