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 Icon action
Alert Icon alert
Arrow-D Icon arrow-d
Arrow-D-L Icon arrow-d-l
Arrow-D-R Icon arrow-d-r
Arrow-L Icon arrow-l
Arrow-R Icon arrow-r
Arrow-U Icon arrow-u
Arrow-U-L Icon arrow-u-l
Arrow-U-R Icon arrow-u-r
Audio Icon audio
Back Icon back
Bars Icon bars
Bullets Icon bullets
Calendar Icon calendar
Camera Icon camera
Carat-D Icon carat-d
Carat-L Icon carat-l
Carat-R Icon carat-r
Carat-U Icon carat-u
Check Icon check
Clock Icon clock
Cloud Icon cloud
Comment Icon comment
Delete Icon delete
Edit Icon edit
Eye Icon eye
Forbidden Icon forbidden
Forward Icon forward
Gear Icon gear
Grid Icon grid
Heart Icon heart
Home Icon home
Info Icon info
Location Icon location
Lock Icon lock
Mail Icon mail
Minus Icon minus
Navigation Icon navigation
Phone Icon phone
Plus Icon plus
Power Icon power
Recycle Icon recycle
Refresh Icon refresh
Search Icon search
Shop Icon shop
Star Icon star
Tag Icon tag
User Icon user
Video Icon 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: 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