As we've seen, jQuery Mobile comes with 50 stock icons out of the box, corresponding to the data-icon="[icon-name]" attribute:
jQuery Mobile uses SVG (Scalable Vector Graphics) to present icons for those browsers that support SVG and uses PNG images for those browsers that do not support SVG.
The stock icons are great - but often we'll wish to use different icons, either because none of the default icons fits our purpose, because we want a different creative look, or both. You can create your own icons by adding some custom CSS and referencing SVG and/or PNG versions of a small image.
We created a small (14px by 14px) image of a smiling face: The image we show here has a gray background for contrast; the real image - the one we use in our code - has a transparent background behind the white eyes and smile.
Let's use our new icon - open up ThemeFramework/Demos/icons/index.html to check out the code:
We add the class
ui-icon-smile to the link button - where
smile is a name we made up to reference our custom icon - in the main body content, along with classes to make the link a button and position the icon.
We then add some CSS to handle this button. The rule for
.ui-icon-smile:after tells jQuery Mobile to use our icon whenever a "smile" icon is called for. We could have (but don't here) included an SVG version of the icon, too.