Jquery mobile custom icon positioning

Question

I checked the docs in 1.4.2 for jqm and it says if I want a custom icon I should just link the source with the created class. It does not position correctly, or apply any of the JQM icon styling unless i specify it. Here is how I did it.

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar" data-iconpos="top">
    <ul>
        <li><a href="page1.php" data-icon="custom" >Page1</a></li>
        <li><a href="page2.php" data-icon="arrow-u">Page2</a></li>
        <li><a href="page3.php" data-icon="gear">Page3</a></li>
        <li><a href="page4.php" data-icon="arrow-l">Page4</a></li>
    </ul>
</div>

CSS:

.ui-icon-custom { 
    background-image: url("images/image.png");
    background-size: 18px 18px;
    background-repeat: no-repeat; }

it does not position correctly, it repeats if I don't specify it, etc. Does this mean that I have to completely style it myself rather than just link the source? or am I doing something wrong?

Answer 1

It seems jquery 1.4.2 uses the :after in css

to make it work I had to use

.ui-icon-custom:after { 
   background-image: url("images/image.png");
   background-size: 18px 18px;
}

also to remove the circle gray background behind simply add the

ui-nodisc-icon

class to the link/button

Answer 2

Working example of cutomizing the icons in jquery mobile

.ui-icon-minus:after { 
    background: url("https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/No-entry.png") no-repeat; 
    background-size: 12px 12px;
    background-position: center center;

}

.ui-icon-plus:after { 
    background: url("https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Add.png") no-repeat; 
    background-size: 12px 12px;
    background-position: center center;

}

ie; replacing the default icons with custom icons using CSS.