Icons

Contact Us or call 1-877-932-8228
Icons

Icons

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 Button Icons
Icon Code
action
alert
arrow-d
arrow-d-l
arrow-d-r
arrow-l
arrow-r
arrow-u
arrow-u-l
arrow-u-r
audio
back
bars
bullets
calendar
camera
carat-d
carat-l
carat-r
carat-u
check
clock
cloud
comment
delete
edit
eye
forbidden
forward
gear
grid
heart
home
info
location
lock
mail
minus
navigation
phone
plus
power
recycle
refresh
search
shop
star
tag
user
video

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:

baby icon

Code Sample:

ThemeFramework/Demos/icons/index.html

Code Explanation:

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.

Next