javascript - jQuery Mobile 中的自定义图标使用自定义主题失败

标签 javascript jquery html css jquery-mobile

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

我的假设是这不起作用,因为我使用的是主题滚轮自定义主题,而且我没有正确实现它。我相信我已经完全遵循了 jquery 移动示例。我只是很困惑,也许比我聪明的人会有所帮助。谢谢

jsfiddle 链接 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>

最佳答案

尝试将 CSS 选择器更改为:

#coffeeicon .ui-icon-custom:after

注意事项

你还必须稍微改变你的 fiddle 以使其工作(在 CSS 框中,你不放 <style></style> ,只是普通的 css 代码。

关于javascript - jQuery Mobile 中的自定义图标使用自定义主题失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20672984/

相关文章:

javascript - RequireJS 异步加载导致用户体验(UX)不佳?

html - 在绝对定位的 div 内居中 float div

javascript - 如何从 DOM 元素创建带有键和值的对象数组?

javascript - 如何创建 2 个并排自动播放的图像幻灯片

javascript - 用于 URL 检测的反向正则表达式

html - 如何将文本与 Twitter 按钮对齐?

javascript - 如果我不能保证两个 ExtJS 馅饼都具有相同的类别,如何使两个 ExtJS 馅饼具有相同切片名称的相同颜色?

Javascript - 计算总价函数,如果只有 3 个数字,则需要在末尾抛出零

jquery - Chrome Bug 选择/显示

javascript - CSS Submit Button with Loading Animation 有悬停效果划分