Как добавить значок поверх шрифта Awesome symbol?

Я хотел бы добавить значок с некоторым числом (5, 10, 100) поверх Символ шрифта Awesome (fa-envelope). Например:

Но я не могу понять, как поместить значок поверх символа. Моя попытка доступна здесь: jsFiddle.

Я бы хотел, чтобы он поддерживал Twitter Bootstrap 2.3.2.

Ответ 1

Это можно сделать без дополнительной разметки, просто нового класса (который вы все равно будете использовать) и псевдоэлемента.

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

Ответ 2

Оберните fa-envelope и span, содержащие число в div, и создайте обертку div position:relative и span position:absolute.

Отметьте fiddle

Используется HTML

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

Надеюсь, это поможет вам.

Ответ 3

Хотя ответ @Paulie_D хорош, он не работает так хорошо, когда у вас есть контейнер переменной ширины.

Это решение работает намного лучше для этого: 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;
}

Ответ 4

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

Поместив значок внутри элемента значка, я смог расположить его относительно границ контейнера значков. Я сделал все размеры, используя em, чтобы размер значка был относительно размера значка, и это можно изменить, просто изменив размер шрифта в .badge