Пользовательские значки jquery для мобильных устройств не работают

Я работаю с jquery mobile 1.4.5 и jquery 1.9.1 и не могу заставить работать пользовательские значки. Вместо значка появляются серые пустые круги. Я нашел несколько вопросов SO по этому поводу, но ни один из них не решил мою проблему. Я взял пример с сайта jquery здесь

Вот мой jsfiddle:jsfiddle

Я также пробовал оба метода использования класса ui-icon и атрибута 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}

css jquery-mobile
person fat fantasma    schedule 17.08.2015    source источник
comment
jsfiddle.net/ezanker/at9t5kzc/2   -  person ezanker    schedule 17.08.2015
comment
Ну, у тебя это работает, но я не знаю, почему. код тот же. Я даже проверил порядок загрузки jqm.css, jqm.js и jquery.js. Что мне не хватает?   -  person fat fantasma    schedule 17.08.2015
comment
Я думаю, что у вас есть несколько плохих символов в вашем тексте CSS. В своей скрипке попробуйте просто вернуться от background-image и background-size к началу строки (т.е. удалить все отступы).   -  person ezanker    schedule 17.08.2015
comment
Спасибо, я исправил это в вопросе, но не обновил скрипку. Теперь я обновил скрипку, и она все еще не работает. Любые идеи? Это сводит меня с ума. Это должно быть что-то глупое.   -  person fat fantasma    schedule 17.08.2015
comment
вот ваша скрипка, только с удаленными дополнительными CSS и отступами: /а>   -  person ezanker    schedule 17.08.2015
comment
МОЙ БОГ. Я только что нашел это прямо перед вами. Вы были правы. Это был какой-то скрытый персонаж, который каким-то образом попал в css, который портил все это. Какая трата утра. Благодарность :)   -  person fat fantasma    schedule 17.08.2015

Ответы (1)


arrow_upward
0
arrow_downward

Проблема с классом, на который вы ориентируетесь. Если вы измените класс на .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;
}
person cocoa    schedule 17.08.2015
comment
это не имеет смысла и совсем не то, что говорят документы. класс .ui-btn-icon-left создан только для позиционирования на кнопке. - person fat fantasma; 17.08.2015
comment
просто работая с предоставленной скрипкой, вот как я смог заставить ее работать. Я считаю, что @ezanker все правильно понял - person cocoa; 17.08.2015