Jquery移动按钮图标

Question

我正在使用jquery移动应用程序，图标按钮没有显示出来。我编辑了css文件以获取图标的正确路径，但它们仍未显示。感谢您提前提供任何帮助。

以下是我制作按钮的代码

    <div data-role="content">
    <a href="new.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="e">Capture New</a>
    <a href="settings.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="e">Settings</a>
    <a href="timeline.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="e">Timeline</a> 
</div><!-- /content -->

这是我在标题中加载的内容

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel = "stylesheet" href="assets/css/jquery.mobile-1.0.1.min.css" />
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.mobile-1.0.1.min.js"></script>

以下是按钮的裁剪截图。图标没有显示出一些奇怪的原因。

Answer 1

我的猜测是你没有正确上传与CSS样式表相关联的images目录。如果您在开发人员工具中查看控制台或网络选项卡，则应该收到错误消息，指出无法找到图标精灵。

这是您的孤立代码，但使用jQuery Mobile文件的CDN版本进行了连接：http://jsfiddle.net/wzMRz/。您可以看到图标显示为所需。

如果您自己托管jQuery Mobile文件，请确保在包含jQuery Mobile包含的ZIP文件中托管/images/目录。此目录需要与CSS样式表位于同一目录中，以便样式表可以正确引用图像（或者如果要移动子画面，则只需更新样式表中的URL以反映）