Custom icons - jQuery Mobile 1.4

by Omar X

HTML

<a href="#" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-custom-icon ui-arrow ui-nodisc-icon">Anchor</a>

<a href="#" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-custom-icon ui-location ui-nodisc-icon">Location</a>

<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn ui-shadow ui-btn-icon-top ui-custom-icon ui-arrow ui-nodisc-icon">Anchor</a>

            </li>
            <li><a href="#" class="ui-btn ui-shadow ui-btn-icon-top ui-custom-icon ui-location ui-nodisc-icon">Location</a>

            </li>
        </ul>
    </div>
</div>

CSS

.ui-arrow:after {
    background-image: url(https://dl.dropboxusercontent.com/u/43649999/demo/193-location-arrow.png);
    background-size: 15px 15px;
}
.ui-location:after {
    background-image: url(https://dl.dropboxusercontent.com/u/43649999/demo/07-map-marker.png);
    background-size: 15px 20px;
}