Answer by Dementic for How to add badge on top of Font Awesome symbol?
This seems to work, and it has a very minimal code to be added. .badge{ position: relative; margin-left: 60%; margin-top: -60%; } <link...
View ArticleAnswer by Ger for How to add badge on top of Font Awesome symbol?
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...
View ArticleAnswer by Paulie_D for 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...
View ArticleAnswer by MStrutt for How to add badge on top of Font Awesome symbol?
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...
View ArticleAnswer by James for 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">...
View ArticleClik here to view.
How to add badge on top of Font Awesome symbol?
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...
View ArticleAnswer by Thomas for How to add badge on top of Font Awesome symbol?
If you're using the SVG + JS version of Font Awesome:https://fontawesome.com/how-to-use/on-the-web/styling/layeringLayers are the new way to place icons and text visually on top of each other.<span...
View ArticleAnswer by raveendra_bikkina for How to add badge on top of Font Awesome symbol?
From Font Awesome documentation:<span class="fa-layers fa-fw" style="background:MistyRose"><i class="fas fa-envelope"></i><span class="fa-layers-counter"...
View Article
