How to Add Badge on Top of Font Awesome Symbol

How to add badge on top of Font Awesome symbol?

This can be done with no additional mark-up, just a new class (which you would use anyway) and a pseudo element.

JSFiddle Demo

HTML

<i class="fa fa-envelope fa-5x fa-border icon-grey badge"></i>

CSS

*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
i {   
    width:100px;
    text-align:center;
    vertical-align:middle;
    position: relative;
}
.badge:after{
    content:"100";
    position: absolute;
    background: rgba(0,0,255,1);
    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;
}

How to align badge on top of icon

You need to position badge elements relatively to their parent menutoggle containers. For this set position: relative; to .menutoggle and position: absolute; for badges with desired top and left/right values.

@import url('//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');

.menutoggle {

    position: relative;

    float: left;

    width: 50px;

    height: 52px;

    font-size: 22px;

    cursor: pointer;

    color: #1d2939;

    border-right: 1px solid #eee;

    border-left: 1px solid #eee;

    -moz-transition: all 0.2s ease-out 0s;

    -webkit-transition: all 0.2s ease-out 0s;

    transition: all 0.2s ease-out 0s;

}

.menutoggle i {

    padding:15px;

    padding-bottom:0px;

}

.menutoggle:hover {

    color: #1d2939;

    background-color: #f7f7f7;

}

.badge {

    position: absolute;

    top: 0;

    right: 0;

    display:inline-block;

    min-width:10px;

    padding:3px 7px;

    font-size:12px;

    font-weight:700;

    line-height:1;

    color:#fff;

    text-align:center;

    white-space:nowrap;

    vertical-align:baseline;

    background-color:#777;

    border-radius:10px;

}

<ul>

    <li>

        <div class="menutoggle"> 

            <i class="fa fa-cog"></i>

            <span class="badge">1</span>

        </div>

    </li>

</ul>

How to add badge on top of icon in bootstrap

You can do this by using position: absolute.

.iconClass{
  position: relative;
}
.iconClass span{
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
}

<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" />
<li class="nav-item mr-3" style="width: 40px;">
    <a href="#" class="nav-link nav-icon iconClass">
        <i class="fas fa-bell"></i>
        <span class="badge badge-light">2</span>
    </a>
  </li>

Making a font awesome badge like icon combination

I ended up using position absolute on the button and position relative on the one I wanted to be a badge.

https://jsfiddle.net/6k1uexor/2/

<div class="group">
Final Attempt
<div class="btn-group">
        <a href="" class="btn btn-default btn-hasbadge">
                <i class="fa fa-font"></i>
                <i class="fa fa-minus fa-badge"></i>
        </a>
        <a href="" class="btn btn-default btn-hasbadge">
                <i class="fa fa-font"></i>
                <i class="fa fa-plus fa-badge"></i>
        </a>
        <a href="" class="btn btn-default">
            <i class="fa fa-print"></i>
        </a>
        <a class="btn btn-default">
            <i class="fa fa-archive"></i>
        </a>
        <a class="btn btn-default">
            <i class="fa fa-cog"></i>
        </a>
    </div>
</div>

CSS:

.btn.btn-hasbadge {
  position:relative;
  padding-left:8px;
  padding-right:16px;
}

.fa-badge {
  font-size: 0.6em;
  position:absolute;
  top:10px;
}

How can I overlay a number on top of a FontAwesome glyph?

You css should look something like:

.contain-i-e-s,.icon-empty-star,.text-i-e-s{
  height:100px; width:100px;
}
.contain-i-e-s{
  position:relative;
}
.text-i-e-s{
  text-align:center; position:absolute;
}

Your HTML might look like:

<div class='contain-i-e-s'>
  <i class='icon-empty-star'></i>
  <div class='text-i-e-s'>99</div>
</div>

How to put notification badges on icons?

You did a really good job, only thing that needed to change was the position from relative to absolute. When changing this the badge stop interacting with other elements flows/layout-position and will become a kind of 'layer on top' of your icon-badge-container element.

The other inline-block element icon-badge-container won't be bother by your badge anymore.

I marked the CSS with a comment what lines are changed.

More about positions: https://developer.mozilla.org/en-US/docs/Web/CSS/position

.icon-badge-group {

 

}

.icon-badge-group .icon-badge-container {

    display: inline-block;

    margin-left:15px;

}

.icon-badge-group .icon-badge-container:first-child { 

  margin-left:0

}

.icon-badge-container {

    margin-top:20px;

    position:relative;

}

.icon-badge-icon {

    font-size: 30px;

    position: relative;

}

.icon-badge {

    background-color: red;

    font-size: 12px;

    color: white;

    text-align: center;

    width:20px;

    height:20px;

    border-radius: 35%;

    position: absolute; /* changed */

    top: -5px; /* changed */

    left: 18px; /* changed */

}

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

<div class="icon-badge-group">

    <div class="icon-badge-container">

        <i class="far fa-envelope-open icon-badge-icon"></i>

        <div class="icon-badge">6</div>

    </div>

    <div class="icon-badge-container">

        <i class="far fa-user icon-badge-icon"></i>

    </div>

    <div class="icon-badge-container">

        <i class="far fa-user icon-badge-icon"></i>

        <div class="icon-badge">6</div>

    </div>

</div>

How to put the number at top right corner of cart icon?

This appears to have been answered previously:
Shopping cart - number of items in cart CSS

Modified the code to suit your request:
http://jsfiddle.net/LhrLe0j6/361/

<i class="fa" style="font-size:24px"></i>
<span class='badge badge-warning' id='lblCartCount'> 5 </span>

CSS:

.badge {
  padding-left: 9px;
  padding-right: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

.label-warning[href],
.badge-warning[href] {
  background-color: #c67605;
}
#lblCartCount {
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
    margin-left: -10px; 
}

---

Related Topics