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

Bootstrap Web Development Front End Technology

We can use glyphicons in a bootstrap project by simply giving a glyphicon-specific class to a “span” tag in HTML. Glyphicons are basically font icons that can be used anywhere in your web application, for example, in buttons, forms, inputs, texts, etc. They are provided by Bootstrap and usually consist of symbols, fonts, or graphic icons.

Syntax

<span class=”glyphicon glyphicon-[icon_name]”></span>

Here, the “glyphicon” class is a Bootstrap class that allows us to use glyphicon icons in the web application, and “icon_name” refers to the particular glyphicon icon that we want to embed and use in the application.

Approach 1: Using CSS Class Selector

In this approach, we will apply custom color to a glyphicon by using a class selector in CSS. The class selector is basically a dot (.) selector which is used a select an HTML element (in this case, a glyphicon) and manipulate the element or just apply some CSS styling to it.

Example

In this example, we will select a glyphicon and give it a color of “red” by using CSS class selector.

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
   <title>How to apply custom color to glyphicon icon embed within a link styled with Bootstrap?</title>
   <style>
      .custom-color {
         color: red;
      }
   </style>
</head>
<body>
   <h1>Glyphicon styling!</h1>
   <a href="#">
      <span class="glyphicon glyphicon-search custom-color"> Red Glyhicon</span>
   </a>
</body>
</html>

Approach 2: Usign CSS id Selector

In this approach, we will apply custom color to a glyphicon by using an id selector in CSS. The id selector is basically a hash (#) selector which is used a select an HTML element (in this case, a glyphicon) and manipulate the element or just apply some CSS styling to it.

Example

In this example, we will select a glyphicon and give it a color of “red” by using CSS id selector.

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
   <title>How to apply custom color to glyphicon icon embed within a link styled with Bootstrap?</title>
   <style>
      #custom-color {
         color: red;
      }
   </style>
</head>
<body>
   <h1>Glyphicon styling!</h1>
   <a href="#">
      <span class="glyphicon glyphicon-search" id="custom-color"> Red Glyhicon</span>
   </a>
</body>
</html>

Conclusion

In this article, we learned what is glyphicon is, and we applied a custom color to a glyphicon which is embedded inside a link and styled with Bootstrap, using 2 approaches. In the first approach, we applied color to the glyphicon using the CSS class selector, and in the second approach, we applied the color to the glyphicon using the CSS id selector.