Question

我正在使用jquery mobile 1.4.5和jquery 1.9.1，似乎无法使自定义图标正常工作。出现灰色空心圆而不是图标。我找到了几个关于这个的SO问题，但没有一个解决了我的问题。我已经从jquery网站Here

中获取了示例

这是我的jsfiddle：jsfiddle

我也尝试了两种使用ui-icon-class的方法以及data-icon =＆＃34; myicon＆＃34;属性。我错过了什么？

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}

Answer 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;
}

jquery移动自定义图标无效

1 个答案: