How to give color to icon in bootstrap?
June 10, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we will learn how to give color to icon in bootstrap.
To give color to the icon, put .color: green class to change the color of the icons.
Use an <h1> element for the title, and <span> elements for the icons.
To import the icon, in the <head> section, use a <link> element with the rel and href attributes
Table of contents
- Includes bootstrap library
- Includes css in html page
- Define its class name
Step 1: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> Step 2: Includes css in html page
Here we are using in css Specify the text-align property for the <body> element.
Set the display to .inline-block and specify the padding for the <span> element.
Set the color property for the .icon-green and .icon-red, separately.
Set the font-size of the icon-large. color of header.
body {
text-align: center;
}
span {
display: inline-block;
padding: 10px 20px;
}
.icon-green {
color: green;
font-size: 25px;
}
.icon-red {
color: red;
font-size: 25px;
}
.icon-large {
font-size: 25px;
}
.icon-blue {
color: blue;
font-size: 25px;
}
.icon-yellow {
color: yellow;
font-size: 25px;
} Step 3: Define its class name
Here we will use the bootstrap class to change the color of icons.
<h1> Color in icon</h1>
<span class="glyphicon glyphicon-tree-deciduous icon-green"></span>
<span class="glyphicon glyphicon-home icon-large"></span>
<span class="glyphicon glyphicon-th icon-red"></span>
<span class="glyphicon glyphicon-camera icon-blue"></span>
<span class="glyphicon glyphicon-picture icon-yellow"></span>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
body {
text-align: center;
}
span {
display: inline-block;
padding: 10px 20px;
}
.icon-green {
color: green;
font-size: 25px;
}
.icon-red {
color: red;
font-size: 25px;
}
.icon-large {
font-size: 25px;
}
.icon-blue {
color: blue;
font-size: 25px;
}
.icon-yellow {
color: yellow;
font-size: 25px;
}
</style>
</head>
<body>
<h1> Color in icon</h1>
<span class="glyphicon glyphicon-tree-deciduous icon-green"></span>
<span class="glyphicon glyphicon-home icon-large"></span>
<span class="glyphicon glyphicon-th icon-red"></span>
<span class="glyphicon glyphicon-camera icon-blue"></span>
<span class="glyphicon glyphicon-picture icon-yellow"></span>
</body>
</html>Check the output of the above code example.
All the best 👍
