jQuery mobile - Как изменить значок выбора на пользовательский значок?

Question

Мне нужно изменить значок выбора в <select> на значок fa. код я использую:

<select class="sortBy" name="sortBy" data-url="${url}" data-icon="ui-icon-arrow-sort"> 
     <option value="">Sort By</option> 
     <option value="new" selected="selected">Newest</option> 
     <option value="old">Oldest</option> 
</select> 

CSS-это:

.ui-icon-arrow-sort{ 
    content: "\f0dd"; 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
} 

На данный момент он не работает хорошо.

Answer 1

Поскольку Font-Awesome значки не являются SVG, они не могут использоваться как background-image в качестве значков jQM. Тем не менее, вы по-прежнему можете отменить значок стрелки в select, но для этого требуется, чтобы JS добавлял пользовательский класс в кнопку в пределах select.

Сначала добавьте data-icon="false" в select, чтобы предотвратить добавление значка стрелки jQM. Затем, на pagecreate, добавьте свой пользовательский класс в select.

.ui-icon-arrow-sort:after { 
    content:"\f0dd"; 
    font: normal normal normal 20px/1 FontAwesome; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin: 0 auto; 
    right: 30px; 
    line-height: 2em; 
} 

$(document).on("pagecreate", "#pageID", function() { 
    $(".sortBy", this).closest(".ui-btn").addClass("ui-icon-arrow-sort"); 
}); 

Demo