0

简而言之，我的问题是，当我将 .ui-icon 背景图像 url() 转换为 icons-36-white.png 时，它返回 ( gear ) 用于 data-icon="home"，( - ) 用于 data-icon="delete "等等所有图标，它们不匹配！

我试图将 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);
}
4

1 回答 1

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%;
    }
}
于 2013-09-24T10:12:12.883 回答