2

我正在使用一个 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>

这是按钮的裁剪屏幕截图。由于某些奇怪的原因，这些图标没有显示。 这是按钮的裁剪屏幕截图

4

1 回答 1

2

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

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

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

于 2012-08-04T16:53:39.213 回答