jQuery mobile- How to change the icon of select to

问题:

I have to change the select icon in <select> to a fa icon. The code I use:

<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>

The CSS is:

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

For now it's not working well.

回答1:

Since Font-Awesome icons aren't SVG, they can't be used as background-image as jQM icons. However, you still can override arrow icon in select, but it requires JS to add custom class to button within select.

First, add data-icon="false" to select to prevent jQM from adding arrow icon. Then, on pagecreate, add your custom class to select's button.

.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