Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Difficulty Level : Medium
  • 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :