Skip to content
Related Articles

Related Articles

How to apply custom color to glyphicon icon embed within a link styled with Boostratp ?
  • Difficulty Level : Medium
  • Last Updated : 31 Dec, 2020

Given an HTML document with relevant Boostrap 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Styling Boostrap Glyficon

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :