Bootstrap badge over icon example

Hi 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.

Bootstrap, Badge, Over, Icon

All the best 👍