图标不显示自定义主题答案

【问题标题】：Icons not displaying with custom theme图标不显示自定义主题
【发布时间】：2014-01-18 11:01:41
【问题描述】：

我正在使用带有在themeroller 上创建的自定义主题的 jQuery mobile 根据说明我必须包含在<head>：

<link rel="stylesheet" href="themes/mycustomtheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.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/jquery.mobile-1.4.0.min.js"></script>

我的自定义主题显示完美，但如果我想使用如下图标：

<a href="#home" data-transition="slideup" data-role="button" data-icon="home">Home</a>

“主页”图标不显示。它只显示一个空圆圈。

我使用谷歌浏览器。

我应该包括什么来解决问题？

【问题讨论】：

您发布网站链接或 jsfiddle 的代码？我的预感是主页图标不包含在您的自定义主题中，但没有链接我无法检查。
drive.google.com/…
图标在那里并且被 CSS 调用，所以我现在的猜测是 .ui-icon-home 类（应用图标 png）没有被应用到按钮。同样，实时链接将帮助我们更好地帮助您。
我解决了。我不认为我必须手动链接图标，我认为 jQuery 可以自主处理。
应该的。奇怪的是它没有。

标签： jquery html css jquery-mobile icons

【解决方案1】：

请注意，data-role="button" 在 1.4 中已弃用，将从 1.5 中删除，现在手动添加类。

<a href="#page" class="ui-btn ui-btn-icon-left ui-icon-home">Anchor</a>

此外，jQM 现在对支持 SVG 的平台使用 SVG 图标，对不支持 SVG 的平台使用普通图标。使用伪选择器:after 在元素之后添加图标。

创建自定义图标就像下面的 CSS 一样简单。

.ui-custom-icon:after {
  background-image: url('custom-icon.png');
  background-size: 25px 25px; /* dont forget this */
}

现在将.ui-custom-icon 添加到任何元素。

Demo

【讨论】：