Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to apply custom color to glyphicon icon embed within a link styled with Bootstrap?
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.
258 Views
