web-dev-qa-db-fra.com

Comment ajouter un badge au-dessus du symbole Font Awesome?

Je voudrais ajouter un badge avec un numéro (5, 10, 100) en plus du symbole Police Awesome (fa-envelope). Par exemple:

the picture

Mais je ne comprends pas comment mettre le badge au dessus du symbole. Ma tentative est disponible ici: jsFiddle .

Je voudrais qu'il supporte Twitter Bootstrap 2.3.2.

cssfont-awesomebadge
53
LA_

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

Démo JSFiddle

[~ # ~] html [~ # ~] 

<i class="fa fa-envelope fa-5x fa-border icon-grey badge"></i>

[~ # ~] 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;
}
65
Paulie_D

Bien que la réponse de @ Paulie_D soit bonne, cela ne fonctionne pas aussi bien avec un conteneur de largeur variable.

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

HTML:

<span class="fa-stack fa-5x has-badge" data-count="8,888,888">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-bell fa-stack-1x fa-inverse"></i>
</span>

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;
}
26
Ger

Enveloppez le fa-envelope et le span contenant le numéro dans un div et transforme le wrapper div position:relative et le spanposition:absolute.

Vérifiez ceci violon

HTML utilisé

<div class="icon-wrapper">
   <i class="fa fa-envelope fa-5x fa-border icon-grey"></i>
   <span class="badge">100</span>
</div>

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

19
James

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

En plaçant le badge à l'intérieur de l'élément icon, j'ai pu le positionner par rapport aux limites du conteneur d'icônes. J'ai fait tout le dimensionnement en utilisant ems afin que la taille du badge soit relative à la taille de l'icône et que cela puisse être modifié en changeant simplement la taille de la police dans .badge

10
MStrutt

Cela semble fonctionner et il y a un code très minime à ajouter.

.badge{
  position: relative;
  margin-left: 60%;
  margin-top: -60%;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="fa-stack fa-3x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-bell fa-stack-1x fa-inverse"></i>
  <span class="badge">17</span>
</span>
<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-bell fa-stack-1x fa-inverse"></i>
  <span class="badge">17</span>
</span>
<span class="fa-stack fa-1x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-bell fa-stack-1x fa-inverse"></i>
  <span class="badge">17</span>
</span>
7
Dementic