css - para - fonticons

¿Cómo agregar una insignia en la parte superior del símbolo Font Awesome?

Question

Me gustaría agregar un distintivo con un número (5, 10, 100) encima del símbolo de Font Awesome ( fa-envelope ). Por ejemplo:

Pero no puedo entender cómo poner la insignia encima del símbolo. Mi intento está disponible aquí: jsFiddle .

Me gustaría que sea compatible con Twitter Bootstrap 2.3.2.

Answer 1

Envuelva el sobre fa-envelope y el span contiene el número en un div y haga la position:relative div del envoltorio position:relative y la position:absolute span position:absolute .

Mira este fiddle

HTML utilizado

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

Espero que esto te pueda ayudar

Answer 2

Esto parece funcionar, y tiene un código muy mínimo para ser agregado.

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

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

Answer 3

Esto se puede hacer sin recargo adicional, solo una nueva clase (que usaría de todos modos) y un pseudo elemento.

Demostración de 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;
}

Answer 4

Si bien la respuesta de @ Paulie_D es buena, no funciona tan bien cuando tienes un contenedor de ancho variable.

Esta solución funciona mucho mejor para eso: 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;
}

Answer 5

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

Al colocar la insignia dentro del elemento icono, pude ubicarla en relación con los límites del contenedor de iconos. Hice todo el tamaño usando em s para que el tamaño de la insignia sea relativo al tamaño del ícono y esto se puede cambiar simplemente cambiando el tamaño de la fuente en .badge