我将 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>
“主页”图标不显示。它只显示一个空圆圈。
我使用谷歌浏览器。
我应该包括什么来解决这个问题？
最佳答案
请注意，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 添加到任何元素。
关于jquery - 图标不显示自定义主题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20858528/