Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

jquery
communitycreator

What is a JQuery mobile Icon?

Chinweuba Elijah Azubuike

Overview

The jQuery mobile framework contains a set of icons often used in mobile applications. jQuery mobile provides a single white icon sprite to save the download size. And it automatically inserts a semi-transparent black circle behind the icon to ensure strong contrast on any backdrop color.

A data-icon element on the anchor specifies the icon that we may use to add an icon to a button. For instance, consider the markup below:

Example

index.html
cdn.js
<html>
<head>
	<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.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
	<a href="index.html" data-role="button" data-icon="delete">Delete</a>
</body>

Explanation

In the above code snippet:

  • Line 3: The link to the CDN for the jquery button styling.

  • Line 4: The link for the jQuery library.

  • Line 5: The link for the jQuery mobile library.

Note: All the above links to the external file add and style the button when we add the attribute data-role="button" data-icon="delete" to any button.

Line 8: We apply the attribute to an a element, which then appears like below:

Output
Output

Output

The output should look like the button above. You can download the code to try it out.

RELATED TAGS

jquery
communitycreator

CONTRIBUTOR

Chinweuba Elijah Azubuike
RELATED COURSES

View all Courses

Keep Exploring