jQuery mobile-如何将select的图标更改为自定义图标？ [英] jQuery mobile- How to change the icon of select to a custom icon?

问题描述

我必须将< select> 中的选择图标更改为fa图标。
我使用的代码：

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>

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

目前它运作不佳。

推荐答案

由于Font-Awesome图标不是SVG，因此它们不能用作 background-image as jQM图标。但是，您仍然可以覆盖中的箭头图标选择，但它需要JS在中选择<将按钮添加到按钮 / code>。

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.

首先，将 data-icon =false添加到选择以防止jQM添加箭头图标。然后，在 pagecreate 上，将您的自定义类添加到选择的按钮。

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

这篇关于jQuery mobile-如何将select的图标更改为自定义图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！