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