jquery mobile自定义图标不起作用答案

【问题标题】：jquery mobile custom icons not workingjquery mobile自定义图标不起作用
【发布时间】：2015-08-17 17:56:24
【问题描述】：

我正在使用 jquery mobile 1.4.5 和 jquery 1.9.1 并且似乎无法使自定义图标正常工作。出现灰色空圆圈而不是图标。我发现了几个关于这个的问题，但没有一个能解决我的问题。我直接从 jquery 网站Here 中举了一个例子

这是我的 jsfiddle:jsfiddle

我还尝试了使用 ui-icon-class 和 data-icon="myicon" 属性的两种方法。我错过了什么？

HTML：

 <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-myicon">myicon</button>
 <button data-icon="myicon" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left">myicon</button>

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

CSS

.ui-icon-myicon:after {
 background-image: url("http://png-1.findicons.com/files/icons/2219/dot_pictograms/128/drink_bar_cocktails.png"); 
 background-size: 18px 18px;
d}

【问题讨论】：

jsfiddle.net/ezanker/at9t5kzc/2
嗯，你得到了它的工作，但我不知道为什么。代码是一样的。我什至检查了我加载 jqm.css、jqm.js 和 jquery.js 的顺序。我错过了什么？
我认为您的 CSS 文本中有一些错误字符。在您的小提琴中，尝试从 background-image 和 background-size 退格到行首（即删除所有缩进）。
谢谢我在问题中更正了，但没有更新小提琴。我现在已经更新了小提琴，它仍然无法正常工作。有任何想法吗？这真让我抓狂。这一定是一些愚蠢的事情。
这是你的小提琴，只删除了额外的 CSS 和缩进：jsfiddle.net/ezanker/at9t5kzc/4

标签： css jquery-mobile

【解决方案1】：

问题出在您所针对的班级。如果您将课程更改为.ui-btn-icon-left，那么它可以工作。

.ui-btn-icon-left:after {
  background-image: url("http://png-1.findicons.com/files/icons/2219/dot_pictograms/128/drink_bar_cocktails.png");
  background-size: 18px 18px;
}

【讨论】：

这没有意义，也不是文档所说的。 .ui-btn-icon-left 类只是在按钮中定位。
只是使用提供的小提琴，这就是我能够让它工作的方式。我相信@ezanker 做对了