jquery移动中的自定义图标使用自定义主题失败

时间:2013-12-19 03:30:14

标签: javascript jquery html css jquery-mobile

我无法在jquery移动列表中获得自定义图标以显示我的生活。

我的假设是,这不起作用,因为我使用的是主题滚动自定义主题,而我没有正确实现它。我相信我已经按照jquery移动示例来写了这封信。我只是难过,也许比我聪明的人会帮忙。感谢

jsfiddle link http://jsfiddle.net/pagesparx/9E8jr/

<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery Mobile Docs - Theming Lists</title> 
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="themes/upstairs.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile.structure-1.4.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<style>
    #coffeeicon .ui-icon-custom {
    background-image: url("http://jquerymobile.com/demos/1.2.0/docs/toolbars/glyphish-icons/34-coffee.png");
    background-position: 2px 2px;
    background-size: 90%; }
</style>

</head> 
<body>
<div data-role="page" data-theme="a">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="b">
            <li data-role="list-divider">Divider</li>
            <li data-icon="home"><a href="#">data-icon="home"</a></li>
            <li data-icon="custom" id="coffeeicon"><a href="#">custom-icon</a></li>
            <li data-icon="alert"><a href="#">data-icon="alert"</a></li>
        </ul>
    </div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:3)

尝试将CS​​S选择器更改为:

#coffeeicon .ui-icon-custom:after

注意

你还必须改变你的小提琴以使它工作(在CSS框中,你没有放<style></style>,只是简单的css代码。