Button Icon Positioning
Description
By default, icons will be left-aligned.
However, you may explicitly align icons to any side by adding the
data-iconpos attribute to the button
with its value corresponding to the side of alignment.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head><!-- w w w. j a va2 s . c om-->
<body>
<div data-role="page">
<div data-role="header">
<h1>Icon Positioning</h1>
</div>
<div data-role="content"
style="text-align: center; margin: 0; padding: 0;">
<p style="margin: 0; padding: 0;">
<a href="#" data-role="button" data-icon="arrow-u" data-theme="b"
data-inline="true" data-iconpos="top">Top</a>
</p>
<p style="margin: 0; padding: 0;">
<a href="#" data-role="button" data-icon="arrow-l" data-theme="b"
data-inline="true">Left</a>
<a href="#" data-role="button"
data-icon="arrow-r" data-theme="b" data-inline="true"
data-iconpos="right">Right</a>
</p>
<p style="margin: 0; padding: 0;">
<a href="#" data-role="button" data-icon="arrow-d" data-theme="b"
data-inline="true" data-iconpos="bottom">Bottom</a>
</p>
</div>
</div>
</body>
</html>