jquery mobile自定义图标定位答案

【问题标题】：Jquery mobile custom icon positioningjquery mobile自定义图标定位
【发布时间】：2014-04-22 20:51:33
【问题描述】：

我在 1.4.2 中检查了 jqm 的文档，它说如果我想要一个自定义图标，我应该只链接源代码与创建的类。除非我指定它，否则它不会正确定位或应用任何 JQM 图标样式。这是我的做法。

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar" data-iconpos="top">
    <ul>
        <li><a href="page1.php" data-icon="custom" >Page1</a></li>
        <li><a href="page2.php" data-icon="arrow-u">Page2</a></li>
        <li><a href="page3.php" data-icon="gear">Page3</a></li>
        <li><a href="page4.php" data-icon="arrow-l">Page4</a></li>
    </ul>
</div>

CSS：

.ui-icon-custom { 
    background-image: url("images/image.png");
    background-size: 18px 18px;
    background-repeat: no-repeat; }

它没有正确定位，如果我不指定它会重复，等等。这是否意味着我必须自己完全设置它的样式而不是仅仅链接源？还是我做错了什么？

【问题讨论】：

查看stackoverflow.com/a/20861031/1771795

标签： css jquery-mobile icons

【解决方案1】：

似乎 jquery 1.4.2 在 css 中使用了 :after

为了让它发挥作用，我不得不使用

.ui-icon-custom:after { 
   background-image: url("images/image.png");
   background-size: 18px 18px;
}

还要去掉后面的圆圈灰色背景，只需添加

ui-nodisc-icon

链接/按钮的分类

【讨论】：

【解决方案2】：

Working example of cutomizing the icons in jquery mobile

.ui-icon-minus:after { 
    background: url("https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/No-entry.png") no-repeat; 
    background-size: 12px 12px;
    background-position: center center;

}

.ui-icon-plus:after { 
    background: url("https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Add.png") no-repeat; 
    background-size: 12px 12px;
    background-position: center center;

}

即;使用 CSS 将默认图标替换为自定义图标。

【讨论】：