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

jQuery mobile-如何将select的图标更改为自定义图标？

1 个答案: