Bootstrap badge over icon example
May 20, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we will learn how to create badge over icon in bootstrap.
Badge is a new UI element. It provides users with a visual clue to help them discover additional relevant content. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Define its class name
- Includes css in html page
This article will guide you to adding badge over icon in Bootstrap with example.
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Step 2: 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/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/ font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>Step 3: Includes css in html page
Here we will use css to get the badge to the right place.
<style>
.fa-stack[data-count]:after{
position:absolute;
right:14%;
top:10%;
content: attr(data-count);
font-size:30%;
padding:.6em;
border-radius:999px;
line-height:.75em;
color: #fff;
background:rgba(255,0,0,1);
text-align:center;
min-width:2em;
font-weight:bold;
}
.file-text {
margin-top: .2em;
color: red;
}
</style>Step 4: Define its class name
After that, create the badge over icon with a class name .fa-stack fa-5x has-badge.
<div class="container">
<span class="fa-stack fa-5x has-badge" data-count="6">
<i class="fa fa-file-text-o fa-stack-1x"></i>
</span>
<span class="fa-stack fa-3x">
<i class="fa fa-file-o fa-stack-2x"></i>
<strong class="fa-stack-1x fa-stack-text file-text">6</strong>
</span>
</div>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/ font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.fa-stack[data-count]:after{
position:absolute;
right:14%;
top:10%;
content: attr(data-count);
font-size:30%;
padding:.6em;
border-radius:999px;
line-height:.75em;
color: #fff;
background:rgba(255,0,0,1);
text-align:center;
min-width:2em;
font-weight:bold;
}
.file-text {
margin-top: .2em;
color: red;
}
</style>
</head>
<body>
<div class="container">
<span class="fa-stack fa-5x has-badge" data-count="6">
<i class="fa fa-file-text-o fa-stack-1x"></i>
</span>
<span class="fa-stack fa-3x">
<i class="fa fa-file-o fa-stack-2x"></i>
<strong class="fa-stack-1x fa-stack-text file-text">6</strong>
</span>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍