What is a JQuery mobile Icon?
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
<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
The output should look like the button above. You can download the code to try it out.
