Comment ajouter un badge sur le haut de Police Génial symbole?

Je voudrais ajouter un badge avec un certain nombre (5, 10, 100) sur le dessus de la Police Impressionnant symbole (fa-envelope). Par exemple:

Comment ajouter un badge sur le haut de Police Génial symbole?

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

Je voudrais avoir le soutien de Twitter Bootstrap 2.3.2.

InformationsquelleAutor LA_ | 2014-03-29
  1. 64

    Cela peut être fait avec aucune autre marque-place, une nouvelle classe (qui serait de toute façon) et un pseudo-élément.

    JSFiddle Démo

    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;
}
    • Merci!!!! Est-il possible de déplacer content de style css à html?
    • Non, sauf si vous allez vers le bas l'élément supplémentaire route comme un <span> BIEN que vous pourriez utiliser un data-attribute comme ceci: jsfiddle.net/zxVhL/18
    • très sympa! Ce travail inter-navigateurs?
    • Cette réponse ne fonctionne pas vraiment quand le comte est mille ou plus.
    • L'expansion sur Paulie_D au commentaire de jsfiddle: Lors du passage en argument de html avec l'attribut de données (par exemple, les données-comte), vous pouvez masquer le badge avec .insigne[data-count="0"]:after{ display : none; }
    • Pour IE 11.0.900.18097 - Le nombre est au-dessus de l'insigne, quand j'ai pensé que cela pourrait être dans le milieu. J'ai changé la hauteur de la ligne sur le pseudo élément de rem aux em et cela a fonctionné. Il y a un ie bug sur le sujet: connect.microsoft.com/IE/feedback/details/776744
    • Pour un soutien de bootstrap vous aurez à changer le nom de la classe insigne, car il est déjà utilisé par le framework ...
    • C'est maintenant ce n'était pas quand cette réponse a été écrit.

    InformationsquelleAutor Paulie_D
  2. 24

    Tandis que @Paulie_D la réponse est bonne, il ne fonctionne pas si bien quand vous avez une variable de la largeur du conteneur.

    Cette solution fonctionne beaucoup mieux pour que: 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;
}
    InformationsquelleAutor Ger
  3. 19

    Envelopper le fa-envelope et la span contenant le nombre dans une div et de faire le wrapper div position:relative et la span position:absolute.

    Cochez cette 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;
}

    Espère que cela peut vous aider à

    InformationsquelleAutor James
  4. 10

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

    En plaçant le badge à l'intérieur de l'icône de l'élément que j'ai été capable de le positionner par rapport aux limites de l'icône conteneur. J'ai fait le choix de la taille à l'aide de ems de sorte que la taille de l'insigne est par rapport à la taille de l'icône, ce qui peut être modifiée en changeant simplement la taille de police dans .badge

    • Solution sympa: par l'ajout d'un ::before et ::after de '.\00a0' {espace) et la suppression de la 'largeur' attribut, il s'adapte également à toute la largeur de l'insigne. Merci!
    InformationsquelleAutor MStrutt
  5. 6

    Cela semble fonctionner, et il a un très peu de code à ajouter.

    CSS:

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

    HTML:

    <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>

    • Meilleure réponse pour bootstrap 4 et aussi margin-left: -15px;margin-top: -21px; qui a le mieux fonctionné pour moi sur toutes les tailles
    InformationsquelleAutor Dementic