Menu icon Foundation
How to place a Badge over an icon?

I would like to add a badge over an icon indicating that there area number of unseen items. Just like Facebook puts a red circle with a number on it to indicate unviewes notifications. I can't find anything that would show me how to do that (ie: overlau a badge over an underlying icon). Please point me in the right direction. 

Thanks. 

...Dale

Badge overlay

I would like to add a badge over an icon indicating that there area number of unseen items. Just like Facebook puts a red circle with a number on it to indicate unviewes notifications. I can't find anything that would show me how to do that (ie: overlau a badge over an underlying icon). Please point me in the right direction. 

Thanks. 

...Dale

Dale Dietrich over 2 years ago

I found this generic way but I was wondering if there was an easier or built-in Zurb/Foundation way. 

Chris over 2 years ago

Hey Dale

the way I do it is using a span to have the icon and badge join together

<span>
   <i class="fa fa-comments fa-2x" aria-hidden="true"></i>
   <i class="badge badge-notify"> 1 </i>
</span>

then using css position the badge using top and left

.badge-notify{
   background:red;
   position:relative;
   top: 0px;
   left: -15px;
  }

 

Enjoy 

Chris

 

Dale Dietrich over 2 years ago

Thanks Chris!!!

And I also just discovered this that perfectly demonstrates it:

 http://foundation.zurb.com/building-blocks/blocks/button-icon-badge.html

  ...Dale