web-dev-qa-db-fra.com

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 à essayer d'obtenir le numéro à afficher dans la bonne position, comme indiqué dans l'image ci-dessous

enter image description here

J'ai besoin que le texte soit plus petit et se déplace un peu vers la droite et vers le haut ... 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-il m'aider, je suis nouveau dans ce domaine.

htmlcsscss-positionfont-awesome
14
Shane

exemple1: utilisation de l'image d'arrière-plan

La meilleure façon de procéder consiste à utiliser position:absolute à la portée enfant de l'ancre parent.

a.notif {
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
  background: url('http://i.imgur.com/evpC48G.png');
  background-size: contain;
  text-decoration: none;
}
.num {
  position: absolute;
  right: 11px;
  top: 6px;
  color: #fff;
}
<a href="" class="notif"><span class="num">2</span></a>

exemple2: utilisation d'une icône géniale de police

Si vous voulez utiliser l'icône font-awesome

c'est du code pour ça

a.fa-globe {
  position: relative;
  font-size: 2em;
  color: grey;
  cursor: pointer;
}
span.fa-comment {
  position: absolute;
  font-size: 0.6em;
  top: -4px;
  color: red;
  right: -4px;
}
span.num {
  position: absolute;
  font-size: 0.3em;
  top: 1px;
  color: #fff;
  right: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a class="fa fa-globe">
  <span class="fa fa-comment"></span>
  <span class="num">2</span>
</a>
25
eirenaios