Add New Icon in jquery Mobile

Jquery mobile is a branch of jquery that used to develop mobile application. You can develop stunning mobile application with jquery mobile. And this is not so difficult because jquery mobile has provide all inbuilt components like buttons ,textboxes, list view, icons etc that you can use and can develop your application. You do not need to write so much code.

And also you can customize in according to your theme and design. In this post I will discuss about how to add new icon in jquery mobile as we use icons like data-icon="arrow-r". You can create your own icon by defining a css class. You just need to add .ui-icon- in your class name and then you can use that class as a data icon. If you want to add sound icon. You can define your class as follows.

.ui-icon-sound-ico{
// write css for sound
}

Now you can use this class name as data icon in your html, but do not write .ui-icon- while writing data icon. Only need to write sound-ico . Example is as follows.

<a data-icon="sound-ico" data-iconpos="left" data-role="button" href="//www.blogger.com/blogger.g?blogID=4276763109087946480#page1">Button</a>

You can add as many icon by defining classes by adding < code>.ui-icon-

in your class name.