Glyphish has a license that allows for free use with attribution. The free set (http://www.glyphish.com/download/) has only one size and 200 icons, the Pro set has multiple sizes, 400 icons, and an unlimited license. (For only $25 dollars, that's a no-brainer.)
Creating a button with an icon is simple:
Adding the data-icon
attribute will yield a button as shown in the preceding figure:
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
Whatever you insert as the value for the data-icon
attribute will become a class name on the button. If you have an attribute of data-icon="directions"
, then the class that is applied by jQM is ui-icon-directions
. Naturally, you'll need to craft this in your own custom Cascading Style Sheets (CSS) file as shown in the following code (we'll put this, and others like it, into the css/custom.css
file):
.ui-icon-directions{ background-image: url(../icons/icons-gray/113-navigation...