Home » jQuery Mobile, Mobile Technology

jQuery Mobile icons | add custom button icon, data-icon

16 July 2011 One Comment
Share on Facebook

jQuery Mobile Icons: jQuery Mobile framework has built in icon sets needed for most mobile application.

An icon can be added to a button by adding a data-icon attribute on the anchor specifying the icon to display. For example, the following markup:

<a href="index.html" data-role="button" data-icon="delete">Delete</a>

Above snippet creates below button icon:

default-jquery-icon-button

data-role=”button” will transform hyper link as button and data-icon=”delete” will add delete icon on the button.

 

Creating custom jQuery mobile icons:

It is also possible to create custom icons for jQuery mobile buttons. To merge with theme create the icon 18×18 pixels saved as a PNG-8 with alpha transparency.

 

CSS to add custom icon set:

Class name in the CSS should have prefix “.ui-icon-twitter” and the class is applied as data-icon=”twitter” in html

<style type="text/css">

	        .ui-icon-twitter {
			background-image: url(icons/twitter.png);
			background-repeat: no-repeat;
		}
		.ui-icon-twitter, .ui-icon-facebook {
			background-position: 0 50%;
		}

		.ui-icon-facebook {
			background-image: url(icons/facebook.png);
			background-repeat: no-repeat;
		}

</style>

<a href="http://twitter.com/designscripting" data-role="button" data-icon="twitter" data-iconpos="right">follow us on twitter</a>
    <a href="www.facebook.com/saravanan.baskaran" data-role="button" data-icon="facebook" data-iconpos="right">follow us on facebook</a>

 

Output after adding the custom icons:

custom-jquery-mobile-icons

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


One Comment »

  • fortes said:

    hey, i think you are mising some stuff so you can get the right style…

    First of all if your icon is not rounded and doesnt fit the circle you should probably delete the circle having the boxshadw be 0px

    You should also start using background-size 100% so you can adapt to high resolution devices with 2x images…

    this definition takes care of both issues:
    .ui-icon-filtros {
    background: url(“../img/filtro18x18.png”) transparent;
    background-repeat:no-repeat;
    background-position: 0px 0px;
    background-size: auto 100%;
    -moz-background-size: auto 100%;
    -webkit-background-size: auto 100%;
    -o-background-size: auto 100%;
    box-shadow: 0 0 0 transparent !important;
    -webkit-box-shadow: 0 0 0 transparent !important;
    -moz-box-shadow: 0 0 0 transparent !important;
    }

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.