What is the proper way to use my own theme (style) design and icons using jQuery Mobile powered website?

jQuery mobile has 5 inbuilt themes

http://jquerymobile.com/demos/1.0开发者_如何转开发a4.1/#docs/toolbars/../../docs/api/themes.html

But design of the mobile website which I'm making is different an icons are also different.

How and where to write custom css and change default icon to custom icon?

Should i choose any default theme's CSS and make changes in that?

Should i replace the default icons with my icons to keep the same name?

---

I would resist making changes to the core jQM CSS file, instead override what you want in your own CSS. For themes, you need to roll your own as follows:

A new ThemeRoller tool will launched with the jQuery Mobile 1.0 release in 2011. In the meantime, it's simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme css file: copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors.

http://jquerymobile.com/demos/1.0a4.1/docs/api/themes.html

… and for custom button icons, here's what the documentation has to say:

To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

http://jquerymobile.com/demos/1.0a4.1/docs/buttons/buttons-icons.html