Jak dodać znaczek na symbolu Font Awesome?

Chciałbym dodać plakietkę z pewną liczbą (5, 10, 100) na górze CZCIONKI symbolu (fa-envelope). Na przykład:

the picture

Ale, nie mogę zrozumieć, jak umieścić odznakę na szczycie symbolu. Moja próba jest dostępna tutaj: jsFiddle .

Chciałbym mieć wsparcie IT Twitter Bootstrap 2.3.2.

Author: Kirk Beard, 2014-03-29
Source

5 answers

Można to zrobić bez dodatkowych znaczników, po prostu nową klasę (której i tak byś użył) i pseudo element.

Jsfiddle Demo

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;
}
 56
Author: Paulie_D,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-11 12:21:47

Chociaż odpowiedź @Paulie_D jest dobra, nie działa tak dobrze, gdy masz kontener o zmiennej szerokości.

To rozwiązanie działa o wiele lepiej do tego: 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;
}
 19
Author: Ger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-21 13:36:54

Owiń fa-envelope i span zawierające numer w div i stwórz wrapper div position:relative I span position:absolute.

Sprawdź to

HTML używany 

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

Mam nadzieję, że to ci pomoże

 18
Author: James,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-29 19:44:20

Http://jsfiddle.net/zxVhL/16/

Umieszczając plakietkę wewnątrz elementu icon byłem w stanie ustawić ją względem granic kontenera ikon. Zrobiłem wszystkie rozmiary za pomocą em s tak, że rozmiar plakietki jest w stosunku do rozmiaru ikony i można to zmienić po prostu zmieniając rozmiar czcionki w .badge

 10
Author: MStrutt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-29 19:47:32

To wydaje się działać i ma bardzo minimalny kod do dodania.

.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>
 2
Author: Dementic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-14 14:56:24