jquery移動按鈕圖標-36-white.png顯示錯誤的圖標

Question

我的問題是，當我ovveride .ui-圖標背景圖像url（）圖標-36-white.png它返回（齒輪）圖標=「家」，（ - ）爲數據圖標=「刪除」等所有圖標，他們是不匹配的！

我試圖將url更改爲url（http://code.jquery.com/mobile/1.3.2/images/icons-36-white.png），但它仍然給我這個時髦的問題！

請諮詢......

HTML：

<a href="#welPage" data-icon="home" data-iconpos="notext">Home</a> 

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

把它放在你的CSS文件...

.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%; 
    } 
}