Bootstrap badge with icon example

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to create badge with 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.

Font Awesome is one of the most famous icons set among developers. It is also one of the preferred icon sets by the Bootstrap team as they have already tested and used it.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Includes css in html page
  • Define its class name

This article will guide you to adding badge with 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

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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"     rel="stylesheet" />
  <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 icon to the right place.

      <style>
.iconClass{
        position: relative;
      }
.iconClass span{
        position: absolute;
        top: 0px;
        right: 0px;
        background: red;
        display: block;
      }
    </style>

Step 4: Define its class name

After that, create the badge with icon with a class name .nav-link nav-icon iconClass.

  <div class="container">
      <li class="nav-item mr-3" style="width: 75px;">
          <a href="#" class="nav-link nav-icon iconClass">
              <i class="fas fa-bell fa-7x"></i>
              <span class="badge badge-light">2</span>
          </a>
        </li>
  </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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"     rel="stylesheet" />
  <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>
 .iconClass{
        position: relative;
      }
      .iconClass span{
        position: absolute;
        top: 0px;
        right: 0px;
        background: red;
        display: block;
      }
  </style>
</head>

<body>
  <div class="container">
      <li class="nav-item mr-3" style="width: 75px;">
          <a href="#" class="nav-link nav-icon iconClass">
              <i class="fas fa-bell fa-7x"></i>
              <span class="badge badge-light">2</span>
          </a>
        </li>
  </div>
</body>

</html>

Check the output of the above code example.

Bootstrap, Badge, With, Icon

All the best 👍