不显示自定义主题的图标 [英] Icons not displaying with custom theme
问题描述
我使用的是jQuery移动版，并在 themeroller 上创建了自定义主题。
根据说明我必须在< head> 中包括：
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>
home图标不显示。它只显示一个空白的圆圈。
The "home" icon doesn't show. It only displays an empty circle.
我使用google chrome。
I work with google chrome.
推荐答案
请注意， 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的平台，而正常图标则用于不支持SVG的平台。图标是在使用伪选择器：之后添加的元素。
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 到任何元素。
Demo
这篇关于不显示自定义主题的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
