Comment append un badge sur le symbole Font Awesome?

Je voudrais append un badge avec un numéro (5, 10, 100) au-dessus du symbole Font Awesome ( fa-envelope ). Par exemple:

l'image

Mais, je ne peux pas comprendre comment mettre le badge sur le symbole. Ma tentative est disponible ici: jsFiddle .

Je voudrais le faire soutenir Twitter Bootstrap 2.3.2.

Cela peut être fait sans balisage supplémentaire, juste une nouvelle classe (que vous utiliseriez de toute façon) et un pseudo-élément.

JSFiddle Demo

HTML

  

CSS

 *.icon-blue {color: #0088cc} *.icon-grey {color: grey} i { width:100px; text-align:center; vertical-align:middle; position: relative; } .badge:after{ content:"100"; position: absolute; background: rgba(0,0,255,1); height:2rem; top:1rem; right:1.5rem; width:2rem; text-align: center; line-height: 2rem;; font-size: 1rem; border-radius: 50%; color:white; border:1px solid blue; } 

Bien que la réponse de @ Paulie_D soit bonne, elle ne fonctionne pas si vous avez un conteneur de largeur variable.

Cette solution fonctionne beaucoup mieux pour cela: http://codepen.io/johnstuif/pen/pvLgYp

HTML:

     

CSS:

 .fa-stack[data-count]:after{ position:absolute; right:0%; top:1%; content: attr(data-count); font-size:30%; padding:.6em; border-radius:999px; line-height:.75em; color: white; background:rgba(255,0,0,.85); text-align:center; min-width:2em; font-weight:bold; } 

Enveloppez l’enveloppe fa-envelope et l’ fa-envelope contenant le nombre dans un div et définissez la position:relative div wrapper position:relative et la position:absolute span position:absolute .

Vérifiez ce violon

HTML utilisé

 
100

CSS

 .icon-wrapper{ position:relative; float:left; } *.icon-blue {color: #0088cc} *.icon-grey {color: grey} i { width:100px; text-align:center; vertical-align:middle; } .badge{ background: rgba(0,0,0,0.5); width: auto; height: auto; margin: 0; border-radius: 50%; position:absolute; top:-13px; right:-8px; padding:5px; } 

J’espère que cela pourrait vous aider

http://jsfiddle.net/zxVhL/16/

En plaçant le badge dans l’élément icône, j’ai pu le positionner par rapport aux limites du conteneur d’icons. J’ai fait tout le dimensionnement en utilisant em s pour que la taille du badge soit relative à la taille de l’icône et cela peut être changé simplement en changeant la taille de la police dans .badge

Cela semble fonctionner, et il y a un code très minimal à append.

 .badge{ position: relative; margin-left: 70%; margin-top: -70%; } 
      17