jQuery Mobile - SPLessons

jQuery Mobile Icons

Chapter 7

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery Mobile Icons

jQuery Mobile Icons

shape Introduction

jQuery Mobile Icons chapter explains how to make button more attractive by adding icons to it.

Adding Icons to jQuery Mobile Buttons

shape Description

To add an icon to the buttons, use the ui-icon class, and position the icon with an icon position class ui-btn-icon-pos.

<a href="#anylink" class="ui-btn ui-icon-info ui-btn-icon-left">Info</a>

jQuery Mobile provides many number of icons.

Class Description
ui-icon-home Home Icon
ui-icon-info Information Icon
ui-icon-delete Delete Icon
ui-icon-back Back Icon
ui-icon-audio Speakers
ui-icon-grid Grid Icon
ui-icon-alert Alert Icon
ui-icon-search Search Icon
ui-icon-lock Padlock
ui-icon-arrow-l Left Arrow
ui-icon-arrow-r Right Arrow

Positioning Icons

shape Description

Position of icons can also be specified for buttons. If not specified the icon position for buttons, the icon will not be shown.Use the ui-btn-icon-position class to specify the position.

Eg:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>

Displaying Only The Icon

shape Description

Only icon without text can also be displayed using "notext" as value for icon position.

Eg:

<a href="#anylink" class="ui-btn ui-icon-info ui-btn-icon-notext">Info</a>

Removing The Circle

shape Description

By default, icons have a gray circle. To remove the circle, add the ui-nodisc-icon class to the element or its container.

Eg:

<a href="#anylink" class="ui-btn ui-icon-info ui-btn-icon-left">Circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-info ui-btn-icon-left ui-nodisc-icon">No Circle</a>

Black or White Icons

shape Description

By default, all icons are white. To change the icon color to black, add the ui-alt-icon to the element or its container.

Eg:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Black</a>

shape Example - 1

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Icons</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
		 
		<!-- jQuery CDN hosted files -->
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
		 
	</head> 
	
	<body> 
	  
	<div id="home" data-role="page">
	
		<div data-role="header"> 
			<h1>Home</h1>
			<a href="#info" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
			<a href="#info" class="ui-btn ui-icon-info ui-btn-icon-left">Info</a>
		</div>
	 
		<p>Welcome to SPLesson's jQuery Mobile(Home)</p>
		<a href="#info" class="ui-btn ui-icon-arrow-r ui-btn-icon-left">Circle (default)</a>
		<a href="#info" class="ui-btn ui-icon-delete ui-btn-icon-left ui-nodisc-icon">No Circle</a>
		<a href="#info" class="ui-btn ui-icon-grid ui-btn-icon-left">White Icon</a>
		<a href="#info" class="ui-btn ui-icon-alert ui-btn-icon-left ui-alt-icon">Black Icon</a>
		<a href="#info" class="ui-btn ui-icon-lock ui-btn-icon-notext">Lock Icon</a>
		
	</div>
	 
	<div id="info" data-role="page" data-title="Info">
		
		<div data-role="header">
			<h1>Info</h1> 
			<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
		</div>
	 
		<p>Welcome to SPLesson's jQuery Mobile(Info)</p>
		
	</div>
	 
	</body>
</html>

Output:

shape Example - 2

<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Icons</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
		 
		<!-- jQuery CDN hosted files -->
		 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
	</head> 
	
	<body> 
	 
		<div id="home" data-role="page">
			<div data-role="header">  
				<h1>Home</h1>
				<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
				<a href="#anylink" class="ui-btn ui-icon-info ui-btn-icon-left">Info</a>
			</div>
		 
			<p>Welcome to SPLesson's jQuery Mobile(Home)</p>
			<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>
			<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>
			<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>
			<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>
		</div>
		 
	</body>
</html>

Output:

shape Example - 3

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Icons</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
		 
		<!-- jQuery CDN hosted files -->
		 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
	</head> 
	
	<body> 
	 
		<!-- Home -->
		<div id="home" data-role="page">
			<div data-role="header">
				<h1>Home</h1>
			</div>
		 
			<p>Welcome to SPLesson's jQuery Mobile(Home)</p>
		 
			<div data-role="controlgroup" data-type="vertical">
				<a href="#fb" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="slide">Facebook</a> 
				<a href="#go" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="fli">Google+</a> 
				<a href="#in" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="pop">Instagram</a> 
				<a href="#tw" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="flip">Twitter</a> 	 
			</div>
		 
			<div data-role="controlgroup" data-type="horizontal">
				<a href="#fb" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="slide">Facebook</a> 
				<a href="#go" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="flip">Google+</a> 
				<a href="#in" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="pop">Instagram</a> 
				<a href="#tw" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="flip">Twitter</a> 
		`	</div>
		 
		</div>
		
		<!-- facebook -->
		 
		<div id="fb" data-role="page" data-title="Facebook">
			<div data-role="header">
				<h1>Facebook</h1>
				<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
			</div>
			<p>Welcome to SPLesson's jQuery Mobile(Facebook)</p>
		</div>
		
		<!-- Google+ -->
		 
		<div id="go" data-role="page" data-title="Google+">
			<div data-role="header">
				<h1>Google+</h1>
				<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
			</div>
			<p>Welcome to SPLesson's jQuery Mobile(Google+)</p>
		</div>
		 
		<!-- Instagram -->
		 
		<div id="in" data-role="page" data-title="Instagram">
			<div data-role="header">
				<h1>Instagram</h1>
				<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
			</div> 
			<p>Welcome to SPLesson's jQuery Mobile(Instagram)</p> 
		</div>
		 
		<!-- Twitter -->
		 
		<div id="tw" data-role="page" data-title="Twitter">
			<div data-role="header">
				<h1>Twitter</h1>
				<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
			</div>
			<p>Welcome to SPLesson's jQuery Mobile(Twitter)</p>
		</div>
	</body>
</html>

Output:

Summary

shape Key Points

  • ui-icon adds icons to the jQuery mobile application.
  • ui-btn-icon-position is used to position a button.