Updated February 18, 2023
Introduction to jQuery Mobile Icons
The jQuery mobile Icon is a bit functional button representing the app’s functionality and works procedure. In jQuery Mobile, a Set of built-in icons may be applied to buttons, collapsible, listview buttons, and other elements. Each icon is available in both SVG and PNG formats. The SVG icons look excellent on both SD and HD screens and are utilized by default. When a platform does not support SVG, the framework goes to PNG icons by default. The jQuery language uses web components such as a <a> and <button> to add an icon to your jQuery Mobile. The jQuery Mobile icon uses the icon class and position to display required icons in mobile applications to show effective and eye-catchy web pages.
What are jQuery Mobile Icons?
- The jQuery Mobile icon represents the operation and information of the application with saving space.
- jQuery Mobile icon comes with a set of built-in icons that may be used with buttons and list view buttons to make them more appealing.
- The jQuery mobile Icon is a small functional button representing the application’s functionality and works as per functions.
- The jQuery mobile Icon creates in a small space of the applications and works as per user requirements.
- The jQuery mobile Icon is a user-understandable, meaningful, and operative button for many operations like a show, hide, left, right, and others.
How to Create jQuery Mobile Icons?
The jQuery mobile icon uses multiple classes. This class works in the following two ways:
- Using <a> tag: If you have to use an icon on the “href” link of the web page, then use this <a> tag.
- Using <button> tag: If you have to use an icon on the button of the web page, then use this <button> tag.
1. First way: Using <a> tag
- Create a web page with an HTML extension like an “icon.html.”
- Insert head and body tag in an HTML page.
Use the following links in the head tag of the web page.
Code:
<link rel = "stylesheet"
href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>Create a container with the “UI-content” class in the body section.
Code:
<div data-role = "main" class = "ui-content" id = "icon">
Insert jquery mobile icon here.
</div>
Use <a> tag with the jquery mobile icon class.
Code:
<a href = "#" class = "ui-btn ui-btn-icon-right ui-icon-calender">
</a>2. Second way: Using <button> tag
- Create a web page with an HTML extension such as an “icon_button.html.”
- Insert head and body tag in an HTML page.
Use the following links in the head tag of the web page.
Code:
<link rel = "stylesheet"
href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>Create a container with the “ui-content” class in the body section.
Code:
<div data-role = "main" class = "ui-content" id = "icon">
Insert jquery mobile icon here.
</div>- Use <button> tag with the jquery mobile icon class.
Code:
<button class = "ui-btn ui-btn-icon-right ui-icon-grid">
</button>Combine the working procedure of the jquery mobile icon.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<div data-role = "main" class = "ui-content" id = "icon">
<button class = "ui-btn ui-btn-icon-right ui-icon-grid">
</button>
<a href = "#" class = "ui-btn ui-btn-icon-right ui-icon-calender">
</a>
</div>
</body>
</html>jQuery Mobile Icons Framework
Some of the icons that work in the jQuery Mobile framework are listed below:
| Sr. No | Icon Area | Description |
| 1 | Icon Set | This icon sets the icon in the button. |
| 2 | Positioning Icons | This icon framework specifies the position of the icon in the button. |
| 3 | Icon-Only | It displays only an icon on the button. |
| 4 | Icon Shadow | It adds an icon shadow to your button. |
| 5 | Removing Circle | This icon framework removes the circle around the icon. |
| 6 | Black or White Icons | This framework changes the color of icons to black or white. |
| 7 | Combining alt and nodisc | It combines the alt and nodisc classes to the icon. |
jQuery Mobile Icons Set
jQuery Mobile icons are listed below:
| Sr. No | Name of Icon | Description | Icon |
| 1 | Action | Action (arrow pointing clockwise out of a box). |  |
| 2 | Alert | This icon is used for alerts. |  |
| 3 | Audio | This icon is used for audio/sound/ Speaker. |  |
| 4 | Arrow-d-l | This icon represents an arrow pointing downwards to the left direction. |  |
| 5 | Arrow-d-r | This icon represents an arrow pointing downwards in the right direction. |  |
| 6 | Arrow-u-l | This icon represents an arrow pointing upwards to the left direction. |  |
| 7 | Arrow-u-r | This icon represents an arrow pointing upwards in the right direction. |  |
| 8 | Arrow-l | This icon represents an arrow pointing left direction. |  |
| 9 | Arrow-r | This icon represents an arrow pointing in the right direction. |  |
| 10 | Arrow-u | This icon represents an arrow pointing up directions. |  |
| 11 | Arrow –d | This icon represents an arrow pointing down the direction. |  |
| 12 | Back | This icon represents a back or a curved arrow pointing anticlockwise upwards direction. |  |
| 13 | Bars | This icon represents bars to contain content. |  |
| 14 | Bullets | This icon represents bullets to manage content. |  |
| 15 | Calendar | This icon is used for the calendar. |  |
| 16 | Camera | This icon is used for the camera. |  |
| 17 | Carat-d | It shows pointing down direction. |  |
| 18 | Carat-l | It shows carat pointing left. |  |
| 19 | Carat-r | It shows carat pointing right direction. |  |
| 20 | Carat-u | It shows carat pointing up direction. |  |
| 21 | Check | This icon is used for the checkmark. |  |
| 22 | Clock | This icon is used for the clock. |  |
| 23 | Cloud | This icon is used for the cloud. |  |
| 24 | Comment | This icon was used for comment. |  |
| 25 | Delete | This icon is used to delete. |  |
| 26 | Edit | This icon is used for Edit/ Pencil. |  |
| 27 | Eye | This icon is used for the eye. |  |
| 28 | Forbidden | This icon is used for the forbidden sign. |  |
| 29 | Forward | This icon is used for forwarding. |  |
| 30 | Gear | This icon is used for gear. |  |
| 31 | Grid | This icon is used for the grid. |  |
| 32 | Heart | This icon is used for the heart/love symbol. |  |
| 33 | Home | This icon is used for home. |  |
| 34 | Info | This icon is used for information. |  |
| 35 | Location | This icon is used for Location/GPS. |  |
| 36 | Lock | This icon is used for lock/ Padlock. |  |
| 37 | This icon is used for mail/letters. |  |
|
| 38 | Minus | This icon is used to minimize. |  |
| 39 | Navigation | This icon is used for navigation. |  |
| 40 | Phone | This icon is used for the telephone. |  |
| 41 | Power | This icon is used for power on/off. |  |
| 42 | Plus | This icon is used for plus. |  |
| 43 | Recycle | This icon is used to recycle. |  |
Examples of jQuery Mobile Icons
Different examples are mentioned below:
Example #1
Use the data-icon attribute to add an icon to your <input> buttons.
Code:
<html>
<head>
<meta fvB name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<scriptsrc="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<input type="button" value="Refresh page" data-icon="refresh">
</div>
</div>
</body>
</html>Output:
Example #2
To add mobile mail icon in button, input and <a> tag.
Code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<scriptsrc="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<p>An example of the Mail Icon in different buttons.</p>
<a href="tryit.asp-filename=tryjqmob_icons_mail.html#" class="ui-btnui-icon-mail ui-btn-icon-left">Mail Anchor</a>
<button class="ui-btnui-icon-mail ui-btn-icon-left">Mail Button</button>
<input type="button" data-icon="mail" value="Mail Input Button">
</div>
</div>
</body>
</html>Output:
Example #3
jQuery mobile icon with the required position.
- It is used to specify the work of the icon in buttons.
- By default, buttons are kept to the left side of the text.
- The default icon may be overridden using the data-iconpos attribute to set the icon position to “right,” “top,” or “bottom.”
Code:
<!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.5/jquery.mobile-1.4.5.min.css">
<scriptsrc="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div>
<a href="index.html" class="ui-btnui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-left">Left</a>
<a href="index.html" class="ui-btnui-shadow ui-corner-all ui-icon-arrow-u ui-btn-icon-top">Top</a>
</div>
</body>
</html>Output:
Conclusion
jQuery mobile icon is a function of web-based technology. It helps to create space-saving and user-friendly web applications. We make responsive content that will be accessed on smartphones, tablets, and desktops.
Recommended Articles
This is a guide to jQuery Mobile Icons. Here we discuss the introduction, framework, icons set, and how to create jQuery mobile icons with examples. You may also have a look at the following articles to learn more –
