title: Show number of notifications on icon
body: <p>I have a notification icon (<a href="/questions/tagged/font-awesome" class="post-tag" title="show questions tagged &#39;font-awesome&#39;" rel="tag">font-awesome</a>) which shows the number of notifications.</p>
  
  <p>I am having a problem trying to get the number to display in the correct position, as shown in see below image</p>
  
  <p><a href="https://i.stack.imgur.com/3xIJW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3xIJW.png" alt="enter image description here"></a></p>
  
  <p>I need the text to be smaller and move right and up a little...
  here is the code</p>
  
  <pre><code>.header .bubble {
    border-radius: 100%;
    height: 14px;
    width: 14px;
    background-color: rgba(226, 32, 91, 0.77);
    color: #ffffff;
    text-align: top;
    position: relative;
    top: 0px;
    float: right;
    right: -3px;
  }
  
   &lt;a href="javascript:;" id="notification-center" class="icon-set globe-fill" data-toggle="dropdown"&gt;&lt;span class="bubble"&gt;2&lt;/span&gt;
  </code></pre>
  
  <p>Can anyone help, I am new to this.</p>