web-dev-qa-db-fra.com

Comment puis-je superposer un nombre au-dessus d'un glyphe FontAwesome?

Comment puis-je superposer un nombre entre 0 et 99 au milieu de 'icon-star-empty'?

cssfont-awesome
29
Nescio

Votre CSS devrait ressembler à quelque chose comme:

.contain-i-e-s,.icon-empty-star,.text-i-e-s{
  height:100px; width:100px;
}
.contain-i-e-s{
  position:relative;
}
.text-i-e-s{
  text-align:center; position:absolute;
}

Votre code HTML pourrait ressembler à:

<div class='contain-i-e-s'>
  <i class='icon-empty-star'></i>
  <div class='text-i-e-s'>99</div>
</div>
6
StackSlave

Faites simplement cela à partir des Font Awesome docs on Stacked Icons :

<span class="fa-stack fa-lg">
    <i class="fa fa-star-o fa-stack-2x"></i>
    <i class="fa fa-stack-1x">1</i>
</span>

Font Awesome Docs Screenshot

121
nilsi

Cela peut également être fait en utilisant Font Awesome Layers en utilisant la version 5.0

<div class="fa-4x">
  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-circle" style="color:Tomato"></i>
    <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-bookmark"></i>
    <i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
    <i class="fas fa-Sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
    <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
    <i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-calendar"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-certificate"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-envelope"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
  </span>
</div>

enter image description here

7
Fakhruddin Ujjainwala

Voici ce que j'utilise pour les superpositions de compteur (badges) avec FontAwesome (FA) 5.1. Contrairement à l'utilisation du nouveau fa-layers, cela ne nécessite pas SVG + JS. Ajoutez simplement un data-count attribuer à <i> balisage ...

[~ # ~] css [~ # ~] 

.fas[data-count]{
    position:relative;
}
.fas[data-count]:after{
    position: absolute;
    right: -0.75em;
    top: -.75em;
    content: attr(data-count);
    padding: .5em;
    border-radius: 10em;
    line-height: .9em;
    color: white;
    background: rgba(255,0,0,.75);
    text-align: center;
    min-width: 2em;
    font: bold .4em sans-serif;
}

Annotation 

<i class="fas fa-envelope" data-count="8"></i> &nbsp;
<i class="fas fa-address-book fa-lg" data-count="16"></i> &nbsp;
<i class="fas fa-bookmark fa-2x" data-count="4"></i> &nbsp;
<i class="fas fa-angry fa-3x" data-count="32"></i> &nbsp;
<i class="fas fa-bell fa-4x" data-count="2"></i>

Exemple

FontAwesome 5.x Badge Counter Overlays

Conclusion

Certaines tailles d'icône FA peuvent nécessiter un ajustement de la taille/position du badge, mais cela fonctionne bien pour mes besoins. Toutes les couleurs/positions peuvent être ajustées pour les superpositions de calendrier, les étiquettes de texte ou le contour en étoile d'OP.

Remarque

Non testé, mais en utilisant le même CSS devrait fonctionner avec les anciennes versions de FA en remplaçant la classe fas par fa à la place.

6
Mavelo