Introduction
jQuery Mobile Icons chapter explains how to make button more attractive by adding icons to it.
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 |
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>
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>
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>
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>
Example - 1
[html]
<!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>
[/html]
Output:
Example - 2
[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="#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>
[/html]
Output:
Example - 3
[html]
<!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>
[/html]
Output:
Key Points
- ui-icon adds icons to the jQuery mobile application.
- ui-btn-icon-position is used to position a button.