jQuery mobile-如何将选择的图标更改为自定义图标?
问题描述:
我必须将<select>
中的选择图标更改为fa图标。 的代码我使用:jQuery mobile-如何将选择的图标更改为自定义图标?
<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
作为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");
});
@ Omar-我知道真棒图标都没有SVG。你可以看到我没有将它用作背景图片。我遵循http://demos.jquerymobile.com/1.1.1/docs/buttons/buttons-icons.html中的自定义图标。它应该工作... – 2014-12-09 07:38:14
@SaritRotshild该演示已过时,1.1是一个过时的版本。 – Omar 2014-12-09 07:54:02