How to add badge on top of Font Awesome symbol?

小开

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

小开

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

小开

最佳答案

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

小开

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

小开

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>

小开

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>

小开

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>