Tenho um ícone de notificação font-awesome) que mostra o número de notificaçõe

Estou com problemas para tentar exibir o número na posição correta, como mostra a imagem abaix

Preciso que o texto seja menor e mova para a direita e para cima um pouco ... aqui está o código

.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;
}

 <a href="javascript:;" id="notification-center" class="icon-set globe-fill" data-toggle="dropdown"><span class="bubble">2</span>

Pode alguém ajudar, eu sou novo niss