Jquery Mobile - Customizing the icon in a listview

Example of Jquery mobile to demonstrate how to add a custom icon to a listview.

by Shreerang Patwardhan

HTML

<div data-role="content">
    <ul data-role="listview" data-inset="true">
        <li>
            <a href="http://shreerangpatwardhan.blogspot.com">Spatial Unlimited</a>
        </li>
    </ul>
</div>

CSS

.ui-icon-arrow-r{
    background-image: url(http://www.vodafone.co.uk/cs/groups/public/documents/webcontent/img_18x18_cross.png) !important;
    background-position: 0 0 !important;
    background-size: 18px 18px;
}

.ui-btn-inner{
    border: none !important;
}

.ui-btn-up-b{
    background: none !important;
    border: none !important;
}

.ui-btn-hover-b{
    background: none !important;
    border: none !important;
}

.ui-icon-shadow{
    box-shadow: none !important;
}

.ui-bar-a .ui-shadow, .ui-bar-b .ui-shadow, .ui-bar-c .ui-shadow{
    box-shadow: 0 0 0 rgba(255, 255, 255, 0) !important;
}