Jquery手机自定义图标定位

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

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

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

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

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

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

ui-nodisc-icon

class到链接/按钮

在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将默认图标替换为自定义图标。

相关内容

最新更新

热门标签：