Icono de insignia con conteo de burbujas (como iOS) en Jquery Mobile

Question

Tengo un encabezado con algunos iconos, quiero mostrar un conteo de burbujas dinámicamente en un ícono como icono de insignia con recuento de notificaciones. ¿Cómo podemos hacer en jquery mobile? Busqué en jquery mobile el conteo de burbujas pero actualmente está disponible con listview, pero quiero mostrar el conteo en un icono en la esquina superior derecha como el recuento de notificaciones de iOS. Busque la URL de referencia a continuación para el icono de insignia que debe implementar en jquery mobile, url: http://en.wikipedia.org/wiki/Apple_Push_Notification_Service

Answer 1

Esto se puede hacer con CSS.

HTML

<div class="icon"> 
    <span class="count">12</span> 
</div> 

CSS

.icon { 
    width: 50px; 
    Height: 50px; 
    background: url(/images/icon.png) 
} 

.icon .count { 
    background:#ff0000; 
    position: absolute; 
    top: -8px; 
    Right: -8px; 
    min-width:14px; 
    height: 14px; 
    color:#ffffff; 
    border-radius: 50%; 
    padding: 2px; 
    text-align: center; 
    font-size: 12px; 
} 

Ahora todo lo que tiene que hacer es averiguar cuándo insertar el número en la "burbuja"

EDITAR: "icono" faltaba el punto de clase