Using jQueryMobile we can create our own custom icons. We just need to create a PNG-8 transparent file in the 18×18 pixels size and define a new CSS class that refers it. The following video clip explains how to do it.
The following is the code sample explained in this video clip. You can find both the code and the PNG-8 18×18 pixels transparent image file available for download in my jQueryMobile free course at http://abelski.lifemichael.com.
<!DOCTYPE html>
<html>
<head>
<title>custom icon demo</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">
</script>
</head>
<body>
<style type="text/css">
.ui-icon-ournewicon {
background-image: url("ournewiconpix.png");
}
</style>
<div data-role="page" id="home" data-theme="e">
<div data-role="header">
<h1>My Clips</h1>
</div>
<div data-role="content" data-theme="e">
<p><a href="#" data-role="button"
data-rel="dialog" data-icon="ournewicon">click here</a></p>
</div>
<div data-role="footer">
<h4>www.lifemichael.com</h4>
</div>
</div>
</body>
</html>
You can find more video clips, slides and relevant code samples in my jQueryMobile free course at http://abelski.lifemichael.com.
