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