How to add badge on top of Font Awesome symbol? - css

Question

I would like to add badge with some number (5, 10, 100) on top of the Font Awesome symbol (fa-envelope). For example:
But, I can not understand how to put the badge on top of the symbol. My attempt is available here: jsFiddle.
I would like to have it support Twitter Bootstrap 2.3.2.

Answer 1

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;
}

Answer 2

While #Paulie_D's answer is good, it doesn't work so well when you have a variable width container.
This solution works a lot better for that: http://codepen.io/johnstuif/pen/pvLgYp
HTML:
<span class="fa-stack fa-5x has-badge" data-count="8,888,888">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
</span>
CSS:
.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,.85);
text-align:center;
min-width:2em;
font-weight:bold;
}

Answer 3

Wrap the fa-envelope and the span containing the number in a div and make the wrapper div position:relative and the span position:absolute.
Check this fiddle
HTML used
<div class="icon-wrapper">
<i class="fa fa-envelope fa-5x fa-border icon-grey"></i>
<span class="badge">100</span>
</div>
CSS
.icon-wrapper{
position:relative;
float:left;
}
*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
i {
width:100px;
text-align:center;
vertical-align:middle;
}
.badge{
background: rgba(0,0,0,0.5);
width: auto;
height: auto;
margin: 0;
border-radius: 50%;
position:absolute;
top:-13px;
right:-8px;
padding:5px;
}
Hope this might help you

Answer 4

This seems to work, and it has a very minimal code to be added.
.badge{
position: relative;
margin-left: 60%;
margin-top: -60%;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
<span class="fa-stack fa-1x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>

Answer 5

http://jsfiddle.net/zxVhL/16/
By placing the badge inside the icon element I was able to position it relative to the bounds of the icon container. I did all the sizing using ems so that the size of the badge is relative to the size of the icon and this can be changed by simply changing the font-size in .badge

Answer 6

If you're using the SVG + JS version of Font Awesome:
https://fontawesome.com/how-to-use/on-the-web/styling/layering
Layers are the new way to place icons and text visually on top of each other.
<span class="fa-layers fa-fw">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>

Answer 7

From Font Awesome documentation:
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>