图标不显示自定义主题 [英] Icons not displaying with custom theme
问题描述
我正在使用带有在 themeroller 上创建的自定义主题的 jQuery mobile根据我必须包含在 中的说明:
I'm using jQuery mobile with a custom theme created on themeroller
According to the instructions I have to include in the <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.
我使用谷歌浏览器.
我应该包括什么来解决问题?
What should I include to resolve the issue?
推荐答案
请注意，data-role="button" 在 1.4 中已弃用，将从 1.5 中删除，现在手动添加类.
Note that data-role="button" is deprecated in 1.4 and will be removed from 1.5, now classes are added manually.
<a href="#page" class="ui-btn ui-btn-icon-left ui-icon-home">Anchor</a>
此外，jQM 现在对支持 SVG 的平台使用 SVG 图标，对不支持的平台使用普通图标.使用伪选择器 :after 在元素之后添加图标.
Moreover, jQM is now using SVG icons for platforms that support SVG and normal icons for ones that dont. Icons are added after an element using pseudo selector :after.
创建自定义图标就像下面的 CSS 一样简单.
Creating custom icons is simple as the CSS below.
.ui-custom-icon:after {
background-image: url('custom-icon.png');
background-size: 25px 25px; /* dont forget this */
}
现在将 .ui-custom-icon 添加到任何元素.
Now add .ui-custom-icon to any element.
这篇关于图标不显示自定义主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
