Bubble count icon (e.g. iOS) icon in jQuery Mobile

Question

I have a header with several icons, I want to dynamically display the number of bubbles in an icon similar to the icon icon with the number of notifications. How can we work in jQuery mobile? I searched in jquery mobile for bubble counting but is currently available with a list, but I want to show the score in the upper right corner of the icon, for example, the number of iOS notifications. Find below the reference URL of the icon of the icon you want to implement in jQuery mobile, url: http://en.wikipedia.org/wiki/Apple_Push_Notification_Service

Answer 1

This can be done using 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; } 

Now all you have to do is figure out when to insert the number into the bubble

EDIT : missing class icon icon.