Buildin Icons
Description
The following list contains data-icon attribute value.
- plus
- minus
- delete
- arrow-r
- arrow-l
- arrow-u
- arrow-d
- check
- gear
- refresh
- forward
- back
- grid
- star
- alert
- info
- home
- search
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" />
<style>
.ui-content {<!-- w ww. j av a2s .c o m-->
min-height: inherit;
}
</style>
<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>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Icon-only Buttons</h1>
</div>
<div data-role="content" data-theme="b">
<p style="text-align: center;">
<a href="#" data-role="button" data-icon="plus"
data-iconpos="notext">Plus</a>
<a href="#" data-role="button"
data-icon="minus" data-iconpos="notext">Minus</a>
<a href="#"
data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
<a href="#" data-role="button" data-icon="arrow-r"
data-iconpos="notext">Next</a>
<a href="#" data-role="button"
data-icon="arrow-l" data-iconpos="notext">Previous</a>
<a href="#"
data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
<a href="#" data-role="button" data-icon="arrow-d"
data-iconpos="notext">Down</a>
<a href="#" data-role="button"
data-icon="check" data-iconpos="notext">Check</a>
<a href="#"
data-role="button" data-icon="gear" data-iconpos="notext">Gear</a>
<a href="#" data-role="button" data-icon="refresh"
data-iconpos="notext">Refresh</a>
<a href="#" data-role="button"
data-icon="forward" data-iconpos="notext">Forward</a>
<a href="#"
data-role="button" data-icon="back" data-iconpos="notext">Back</a>
<a href="#" data-role="button" data-icon="grid"
data-iconpos="notext">Grid</a>
<a href="#" data-role="button"
data-icon="star" data-iconpos="notext">Star</a>
<a href="#"
data-role="button" data-icon="alert" data-iconpos="notext">Alert</a>
<a href="#" data-role="button" data-icon="info"
data-iconpos="notext">Info</a>
<a href="#" data-role="button"
data-icon="home" data-iconpos="notext">Home</a>
<button data-icon="search" data-iconpos="notext" data-theme="b">Search</button>
</p>
</div>
</div>
</body>
</html>