Search code examples
javascriptjquery-mobile

jQuery mobile icon count badges / bubbles

How to add a count bubble or badge on top of a icon (data-icon) in jQuery mobile. Is there a better way to add it as widget rather than manipulating with CSS ? I expect the count to be updated dynamically from the server.

Solution

  • HTML :

    <span class="ui-li-count ui-btn-corner-all countBubl">12</span>

    CSS : 

    .countBubl {float:left;margin-top:-42px;margin-left:35px;background:#ed1d24;color:#fff;padding:2px;}

    Paste the HTML next to your image tag. "You can adjust the margin-top & margin-left based on the icon size.I think it may work". Thanks.