图标没有显示在jquery移动

Question

我正在创建一个jQuery移动应用程序.Icons没有出现在我的任何页面中。

这是代码

<link rel="stylesheet" href="css/jquery.mobile.min.css" /> 
<script src="script/jquery-1.7.1.min.js"></script>
<script src="script/jquery.mobile.min.js"></script> 

但是当我使用CDN托管文件时，其工作正常。为什么会这样？

Answer 1

如果您在本地使用它，则必须从images目录下载另外4个文件： icons-18-black.png，icons-36-black.png，icons-18-white.png和icons-36-white.png。这些是jquery css用于显示这些图标的四个图像文件。下载它们并将其保存在“images”文件夹中，并共享与css文件相同的根文件夹。它会工作得很好，CDN将为您托管这些图像。

Dowload Link

Answer 2

因为您使用的是内部包。内部包必须从您的电脑获取图标。您必须将整个文件包含在正确的目录中。或尝试包含此托管库

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

Answer 3

您的问题中没有提供足够的信息。您的错误可能有很多原因，例如：

• 如果您使用的是图标字体：
  • 是上传到正确目录的字体吗？
  • 您支持的字符是否支持该字体？
  • 您的图标的font-size是否设置为可见值？
• 如果您使用的是jQuery包含的图标：
  • 您是否已将其上传到正确的目录？
  • 您是否将网址指向正确的位置以加载它们？

Answer 4

我在下载的jQuery Mobile版本中遇到了同样的问题。

我从“ jquerymobile.jqGrid-Trial.zip ”文件中下载了代码。在我的笔记本电脑上，jqGrid Mobile图标看起来不错，但在iPhone或Android设备上，它们会被严重抵消。

我的解决方案是修改 jquery.mobile.css 文件的一部分，如下所示：

.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-bars, .ui-icon-edit,
.ui-icon-search, .ui-icon-searchfield:after, 
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
    background-image: url(images/icons-18-white.png);
    -moz-background-size: 776px 18px;
    -o-background-size: 776px 18px;
    -webkit-background-size: 776px 18px;
    background-size: 776px 18px;
}

（之前，它有一个不同的背景图像名称，并且引用的图像宽度为864px，而不是776px。）

顺便说一下，为了找到这个解决方案，我实际上忽略了我从jQuery网站下载的.zip文件，查看了jqGrid自己的例子（ 在设备上正常工作），然后比较他们选择使用的“ jquery-mobile-1.2.0.css ”文件：

Working jQuery Grid demo

希望这有帮助。