CODEWITHSUNDEEP
htmlcss
Arif Reza
Arif Reza

Reputation: 297

Making a notification icon with notification count

I want to make a notification icon on my website like facebook. Facebook shows you notification icon on the top left corner. On facebook, there is number of notifications beside the icon. I want to make the same thing. I want to show the number of notifications beside the notification icon just like facebook. I have created this code for this:

.icon {
  width: 30px;
  height: 30px;
}

.txt {
  padding: -10px 0 0 10px;
  background: red;
  font-size: xx-small;
}
<div class="icon">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" alt="none" width="100%" height="100%" />
  <div class="txt">10</div>
</div>

But it is not happening. Please anyone help me how can I make it same like facebook. Thank You.

Upvotes: 7

Views: 15478

Answers (2)

Penny Liu
Penny Liu

Reputation: 17438

In this example, I prepend the value of the data-count data-* global attribute to the contents of the <button> element.

button {
  position: relative;
  font-size: 4em;
  color: #0c0a0b;
  border: 0;
  background: none;
  cursor: pointer;
}

button::before {
  content: attr(data-count);
  position: absolute;
  top: -0.25em;
  right: -0.25em;
  width: 2em;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #ff0033;
  color: white;
  font-size: 0.25em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" />
<button data-count="9">
  <i class="fa-brands fa-threads"></i>
</button>

Upvotes: 0

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

Just use position: relative; for the icon and position: absolute; for the text. Define the distance to the icon with top and left.

.icon {
  width: 30px;
  height: 30px;
  position: relative;
}

.txt {
  background-color: red;
  font-size: xx-small;
  position: absolute;
  padding: 2px;
  top: 5px;
  left: 5px;
  border-radius: 25px;
}
<div class="icon">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" alt="none" width="100%" height="100%" />
  <div class="txt">10</div>
</div>

I would also define the icon as a background image of .icon with css and remove the img tag.

Upvotes: 16

Related Questions