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.

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>

LEARN MORE

JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5

jQuery Mobile Icon Example

Set of Icons added by jQuery Mobile

About Us

Utility