Badges on icons

PHOTO EMBED

Wed Feb 02 2022 04:10:07 GMT+0000 (Coordinated Universal Time)

Saved by @AnishJakka 

<!-- Email badges -->
<div class="badge-container sm-gutter">
    <div class="email-badge">
        <i class="fas fa-envelope fa-2x xs-padding"></i>
    </div>
    <div class="badge xs-padding full-brr para-sm-xs">10</div>
</div>

<div class="badge-container sm-gutter">
    <div class="email-badge">
        <i class="fas fa-envelope xs-padding"></i>
    </div>
    <div class="badge full-brr para-xs xxs-padding pos-small">
        10
    </div>
</div>

<!-- notification bell -->
<div class="badge-container sm-gutter">
    <div class="notifs-badge full-brr">
        <i class="fas fa-bell fa-2x sm-padding"></i>
    </div>
    <div class="badge xs-padding full-brr para-sm-xs">10</div>
</div>

<!-- button badge-->
<div class="badge-container sm-gutter">
    <button class="button-badge para-sm xs-gutter md-brr">
        Action
    </button>
    <div class="badge xs-padding full-brr para-sm-xs">10</div>
</div>

<div class="badge-container sm-gutter">
    <button class="button-badge para-xs xs-gutter md-brr">
        Action
    </button>
    <div class="badge xxs-padding full-brr para-xs pos-small">
        10
    </div>
</div>
content_copyCOPY