<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" /> <div class="container"> <div class="icon-badge-container"> <i class="far fa-envelope 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 class="icon-badge">6</div> </div> <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> </div>

.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: 100%; position: absolute; /* changed */ top: -5px; /* changed */ left: 18px; /* changed */ }