Notification Icon with Number Badge using CSS

A number badge over the notification icon is one of the useful elements in a user-friendly interface. This badge alerts the users to read their unread notifications as well as shows the number of notifications. So, in this tutorial, we’ll create a number badge over the notification icon using CSS.

Basically, this number badge can be placed over any icon as shown in the above image. Whether you are using Font Awesome icons or any other iconic fonts library, you can easily put this badge on your icon. Likewise, you can also place this badge over an image or div element according to your needs.

Here, we are going to use the CSS Font Awesome icons library and create a number badge over these icons with two different methods. In the first method, we’ll simply create a notification bell icon and wrap it inside a div element. Then, we’ll style this div wrapper as a badge with notifications counting. In the second method, you can pass the notification count value in the HTML data attribute.

You can easily adjust these badge icons anywhere on your HTML page, like in the horizontal navigation menu. Before getting started with coding, you can check the number badge examples on the demo page. There are multiple examples with different badge sizes and positions. Ok! now let’s start with HTML in order to create badge over icons.

The HTML Structure

First of all, load the Font Awesome CSS into the head tag of your HTML document by adding the following CDN link. If you’re already using Font Awesome icons in your project, then skip this step.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

Now, create a Font Awesome bell icon with an additional class name "badge". Wrap this icon into a div element and define its class name “badge-notification”. If you want to keep the normal size of the icon, then simply remove the "fa-5x" class name.

<div class="badge-notification">
<i class="fa fa-bell fa-5x fa-border icon-grey badge"></i>
</div>

If you don’t want to use Font Awesome icon, you can place an image icon inside the "badge-notification" div element. Similarly, you can also place any other icon inside this div on which you want to display a number badge.

For the other two examples, create the HTML structure as follows. Here, you can put the counting of notification numbers inside the "data-count" attribute. You can pass the number value in this attribute dynamically in order to show the notification counting in realtime.

<div id="ex3">
  <span class="p1 fa-stack fa-5x has-badge" data-count="3">
    <i class="p2 fa fa-circle fa-stack-2x"></i>
    <i class="p3 fa fa-shopping-cart fa-stack-1x fa-inverse" data-count="5"></i>
  </span>
</div>
<div id="ex2">
  <span class="fa-stack fa-5x has-badge" data-count="2">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-bell fa-stack-1x fa-inverse"></i>
  </span>
</div>

The CSS Styles for Badge Number Notification Icon

In CSS, specify the fixed width for the icon according to the size of the icon and display it as an inline-block element. Keep its relative position and define the "middle" value for the vertical-align property. Similarly, align the text to the center by defining the "center" value for the align-text property.

.badge-notification i {
  width: 100px;
    display: inline-block;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

After that, target the after pseudo-selector for the badge notification and define its absolute position. Inside the content property, place your number value for the notifications count. Specify the width and height according to the size of the badge. Likewise, define "50%" value for the border-radius property in order to make the notification badge circular.

The values for the CSS background, color, border, and text-align, etc. can be defined according to your needs. Therefore, the complete CSS snippet for the notification number badge is as follows:

.badge-notification .badge:after {
  content: "100";
  position: absolute;
  background: blue;
  height: 2rem;
  top: 1rem;
  right: 1.5rem;
  width: 2rem;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
  border-radius: 50%;
  color: white;
  border: 1px solid blue;
}

CSS Styles for other Examples

If you want to pass the number value in the "data-count" attribute, then use the following CSS to style your notification badge. All the CSS properties are similar to the above CSS code except a few changes.  So, define the CSS styles as mentioned below and use the CSS attr(data-count) value for the content property.

#ex2 .fa-stack[data-count]:after {
  position: absolute;
  right: 0%;
  top: 1%;
  content: attr(data-count);
  font-size: 30%;
  padding: .6em;
  border-radius: 999px;
  line-height: .75em;
  color: white;
  background: rgba(255, 0, 0, 0.85);
  text-align: center;
  min-width: 2em;
  font-weight: bold;
}

The following is another CSS example of a badge if you want to adjust the top right corner of the icon. If you want to make this badge in a square shape, then remove the border-radius property.

#ex3 .fa-stack[data-count]:after {
  position: absolute;
  right: 0%;
  top: 1%;
  content: attr(data-count);
  font-size: 30%;
  padding: .6em;
  border-radius: 50%;
  line-height: .8em;
  color: white;
  background: rgba(255, 0, 0, 0.85);
  text-align: center;
  min-width: 1em;
  font-weight: bold;
}

That’s all! I hope you have successfully created a number badge over the notification icon using CSS. If you have any questions or need further help, feel free to comment below.

You May Also Like

Leave a Comment