Home  >  jQuery Mobile

jQuery Mobile Icon Example

September 03, 2014
jQuery Mobile comes with a variety of icons. It provides the set of icons and stylish button. All icons and button icons are created by CSS3. Icons are more stylish and browser supported. You can also control the position of the icon by set of class. ui-btn-icon class to specify the position of button icon.
jQuery Mobile Icon Example

Set of Icons added by jQuery Mobile

We can add set of icons in one button and multiple buttons in mobile web page and desktop page. jQuery mobile provides various class for icons creation.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div class="ui-content" data-role="main">
 <a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-left">Right Arrow Button</a>
 <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Left Arrow Button</a>
 <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Delete Button</a>
 <a href="#" class="ui-btn ui-icon-info ui-btn-icon-left">Information Button</a>
 <a href="#" class="ui-btn ui-icon-audio ui-btn-icon-left">Audio Button</a>
 <a href="#" class="ui-btn ui-icon-back ui-btn-icon-left">Back Button</a>
 <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search Button</a>
 <a href="#" class="ui-btn ui-icon-grid ui-btn-icon-left">Grid Button</a>
 <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home Button</a>   
</div>

</body>
</html> 
jQuery Mobile Icon Example
FIND MORE TUTORILAS



Copyright ©2017 concretepage.com, all rights reserved |Privacy Policy | Contact Us