css - jquery mobile自定义图标定位

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 中使用了 :after

为了让它工作，我必须使用

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

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

ui-nodisc-icon

链接/按钮类