图标未显示自定义主题

Question

I'm using jQuery mobile with a custom theme created on themeroller According to the instructions I have to include in the <head> : 我正在使用带有在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>

My custom theme displays perfectly but if I want to use an icon like: 我的自定义主题完美显示，但是如果我想使用如下图标：

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

The "home" icon doesn't show. “主页”图标不显示。 It only displays an empty circle. 它仅显示一个空圆圈。

I work with google chrome. 我使用谷歌浏览器。

What should I include to resolve the issue? 我应该包括什么来解决此问题？

Answer 1

Note that data-role="button" is deprecated in 1.4 and will be removed from 1.5, now classes are added manually. 请注意， data-role="button"在1.4中已弃用，将从1.5中删除，现在手动添加类。

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

Moreover, jQM is now using SVG icons for platforms that support SVG and normal icons for ones that dont. 而且，jQM现在将SVG图标用于支持SVG的平台，将普通图标用于不支持SVG的平台。 Icons are added after an element using pseudo selector :after . 使用伪选择器:after将图标添加到元素:after 。

Creating custom icons is simple as the CSS below. 创建自定义图标非常简单，如下面的CSS所示。

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

Now add .ui-custom-icon to any element. 现在，将.ui-custom-icon添加到任何元素。

Demo 演示

图标未显示自定义主题

问题描述

1 个解决方案

解决方案1
0 2013-12-31 17:27:51

图标未显示自定义主题

问题描述

1 个解决方案

解决方案1 0 2013-12-31 17:27:51

解决方案1
0 2013-12-31 17:27:51