jquery mobile button icons-36-white.png shows wrong icon - jquery-mobile

Question

My problem in short is that when i ovveride .ui-icon background image url() to icons-36-white.png it returns ( gear ) for data-icon="home", ( - ) for data-icon="delete" and so forth for all icons, they are mismatched!
I tried to change the url to url(http://code.jquery.com/mobile/1.3.2/images/icons-36-white.png), yet it still gives me this funky issue!!
Please advice...
html:
Home
css:
#mainNav .ui-icon {
width: 36px;
height: 36px;
/*background-image: url(../themes/images/icons-36-white.png);*/
background-image: url(http://code.jquery.com/mobile/1.3.2/images/icons-36-white.png);
}

Answer 1

Place it in your css file...
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-bars, .ui-icon-edit,
.ui-icon-search, .ui-icon-searchfield:after,
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
background-image: url(images/icons-36-white.png);
-moz-background-size: 864px 18px;
-o-background-size: 864px 18px;
-webkit-background-size: 864px 18px;
background-size: 864px 18px;
}
.ui-icon-alt .ui-icon {
background-image: url(images/icons-36-black.png);
}
.ui-icon-plus {
background-position: 0 50%;
}
.ui-icon-minus {
background-position: -36px 50%;
}
.ui-icon-delete {
background-position: -72px 50%;
}
.ui-icon-arrow-r {
background-position: -108px 50%;
}
.ui-icon-arrow-l {
background-position: -144px 50%;
}
.ui-icon-arrow-u {
background-position: -179px 50%;
}
.ui-icon-arrow-d {
background-position: -215px 50%;
}
.ui-icon-check {
background-position: -252px 50%;
}
.ui-icon-gear {
background-position: -287px 50%;
}
.ui-icon-refresh {
background-position: -323px 50%;
}
.ui-icon-forward {
background-position: -360px 50%;
}
.ui-icon-back {
background-position: -395px 50%;
}
.ui-icon-grid {
background-position: -431px 50%;
}
.ui-icon-star {
background-position: -467px 50%;
}
.ui-icon-alert {
background-position: -503px 50%;
}
.ui-icon-info {
background-position: -538px 50%;
}
.ui-icon-home {
background-position: -575px 50%;
}
.ui-icon-search,
.ui-icon-searchfield:after {
background-position: -611px 50%;
}
.ui-icon-checkbox-on {
background-position: -647px 50%;
}
.ui-icon-checkbox-off {
background-position: -683px 50%;
}
.ui-icon-radio-on {
background-position: -718px 50%;
}
.ui-icon-radio-off {
background-position: -754px 50%;
}
.ui-icon-bars {
background-position: -788px 50%;
}.ui-icon-edit {
background-position: -824px 50%;
}
}