Question

我正在使用jQuery mobile在themeroller上创建的自定义主题根据我必须包含在<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>

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

我使用谷歌浏览器。

我应该包含哪些内容来解决此问题？

Answer 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

图标不显示自定义主题

1 个答案: