jquerymobile数据图标问题答案

【问题标题】：jquerymobile data-icon issuejquerymobile数据图标问题
【发布时间】：2013-08-21 12:38:21
【问题描述】：

如果我在我的 html 数据图标中使用 CDN 托管的 javascript 和 css url，则可以正确显示。如果我在项目中使用本地文件夹位置，则它不起作用。找到以下代码以供参考。我只有下面提到的 CDN url 中的内容。请指教我做错了什么。

下面的代码不起作用，圆形图标正在显示，但我没有在图标内看到信息徽标“i”。

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
 </head>
<body>
<div data-role="page" id="test">
    <div data-role="header" data-theme="b">
        <a href="#home" data-icon="info" data-iconpos="notext"></a>
        <h1>Home</h1>
    </div>
</div>
</body>
</html>

如果我使用 CDN url，此代码有效，带有信息符号的图标即将到来

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css" type="text/css" />
<script type="text/javascript" src="code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="test">
    <div data-role="header" data-theme="b">
        <a href="#home" data-icon="info" data-iconpos="notext"></a>
        <h1>Home</h1>
    </div>
</div>
</body>
</html>

【问题讨论】：

jQuery why some of my icons start looking incorrect 的可能重复项

标签： jquery jquery-mobile

【解决方案1】：

如果您在本地使用它，则需要将图标图像上传到服务器。在第二个示例中，CDN 将为您托管图像，因为 css 正在与 css 文件相关的文件夹中查找。

在图标类的 CSS 中，您会看到它使用以下内容：

background-image: url(images/icons-36-white.png);

所以你需要从 jquery 下载图标文件。例如从这里：http://code.jquery.com/mobile/1.3.2/images/icons-36-white.png

【讨论】：

我已经从 jquerymobile 网站下载了 css 并保存到我的项目文件夹中。这个文件不包含那些图片？？？
如果你从这里下载，你也应该得到图片：jquerymobile.com/resources/download/jquery.mobile-1.3.2.zip
抱歉我没有下载那些图片
您的 css 位于名为 css 的文件夹中。因此，如果您在此 css 文件夹中创建一个名为“images”的文件夹并将图标放在那里，它应该可以工作。
+1 在@DavidMacCrimmon 竭尽全力帮助您找到正确答案之后，您应该将其标记为正确。

【解决方案2】：

如果您为 jQuery Mobile 托管 CSS 样式表，那么您还需要托管图片（这些图片位于 JS 和 CSS 文件所在的同一个 .zip 文件中）

图像精灵应该在一个名为 images 的目录中，该目录与 jQuery Mobile CSS 样式表位于同一目录中（样式表相对引用图像如下：background-image: url(images/图标-18-white.png);).

Source Location

【讨论】：