Buttons can contain text, icons, or both. The icon can be positioned in one of the four directions within a button. The jQuery Mobile framework provides a set of standard icons that you can use in your app. This recipe shows you how to add a custom icon to a button along with the standard icon provided by the framework.
Copy the full code of this recipe from the code/04/custom-icon
sources folder. You can launch this code using the URL http://localhost:8080/04/custom-icon/main.html
.
In this recipe, the following image, square.png
is used for the custom icon image:
Create a new style sheet
jqm-icon.css
and define the custom icon style as in the following code:.ui-icon-square { background: #fff; background: rgba(0,0,0,.4); background-image: url("../../resources/images/square.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution...