Afficher le nombre de notifications sur l'icône

J'ai une icône de notification (font-awesome) qui indique le nombre de notifications.

J'ai un problème en essayant d'obtenir le nombre à afficher dans la bonne position, comme illustré dans l'image ci-dessous

Afficher le nombre de notifications sur l'icône

J'ai besoin de le texte à être plus petits et de se déplacer à droite et un peu...
voici le 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;
}

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

Quelqu'un peut aider, je suis nouveau à cela.

Pourquoi l'en-tête et de la bulle ont les mêmes propriétés css? Vous devriez separete ce qui en fait l'en-tête relative et de votre numéro d'absolu dans le relatif
Ils n'ont pas les mêmes propriétés. .l'en-tête .bulle.. pas .l'en-tête, .bulle..
Pouvez vous s'il vous plaît faire un violon ? Ou au moins nous donner votre balisage
jsfiddle.net/q84ydjr0

OriginalL'auteur Shane | 2015-08-03

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *