jquery mobile button icons-36-white.png 显示错误的图标答案

【问题标题】：jquery mobile button icons-36-white.png shows wrong iconjquery mobile button icons-36-white.png 显示错误的图标
【发布时间】：2013-09-24 18:12:12
【问题描述】：

简而言之，我的问题是，当我将 .ui-icon 背景图像 url() 转换为 icons-36-white.png 时，它返回 ( gear ) for data-icon="home"， ( - ) for 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);
}

【问题讨论】：

标签： jquery-mobile icons

【解决方案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%;
    }
}

【讨论】：

它极大地解决了映射问题！但按钮尺寸仍然很小！您可能认为我想要按钮图像的高清技巧，但实际上我想要的是制作一个 36x36 而不是 18x18 的图标无论如何感谢您的努力 =)
什么是864px？？背景宽度？你能告诉我这个数字到底代表什么吗？