<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <span class="fa-stack fa-2x has-badge" data-count="2"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-bell fa-stack-1x fa-inverse"></i> </span> <!-- found at https://codepen.io/johnstuif/pen/pvLgYp -->

.fa-stack[data-count]:after{ position:absolute; right:0%; top:1%; content: attr(data-count); font-size:40%; 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; }