Open In App

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

Last Updated : 08 Oct, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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=
 
    <script src=
    </script>
 
    <script src=
    </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>


Output:

Styling Bootstrap Glyficon

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads