Question

我在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; }

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

Answer 1

似乎jquery 1.4.2使用了：在css之后

使其工作我必须使用

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

还要删除背后的圆圈灰色背景，只需添加

即可

ui-nodisc-icon

类到链接/按钮

Answer 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替换使用自定义图标的默认图标。

Jquery移动自定义图标定位

2 个答案: