CODEWITHSUNDEEP
jquery-mobilenavbar
N Rocking
N Rocking

Reputation: 3035

how to add custom icons in navbar of a jQuery mobile page

In jQuery mobile page, how can I add custom icons in navigation bar? My footer content is given below:

<footer data-role="footer">  
     <div data-role="navbar" >  
         <ul>  
              <li><a href="#" data-icon="abc"> Abc </a></li>  
              <li><a href="#" data-icon="xyz"> xyz </a></li>  
          </ul>  
      </div>  
</footer>

CSS file contains

.ui-icon-abc
{
    background-image: url('common-images/c.png');
    background-size: 60px 60px;
}

However this doesn't work. it shows a circle but not the image. I tried with other SO ( link 1 and link 2). However, that didn't help me.

Upvotes: 1

Views: 9923

Answers (1)

Gajotres
Gajotres

Reputation: 57309

You will need to improve your css a bit, this will work (Your icon icon also needs to be smaller for this .ui-icon- method to work):

.ui-icon-abc
{
    background: url('common-images/c.png') no-repeat rgba(0, 0, 0, 0.4) !important;
    background-size: 16px 16px;
}

Take a look at my example: http://jsfiddle.net/Gajotres/Q9TrF/

Upvotes: 3

Related Questions