选择选项中的Font Awesome Unicode在移动设备上中断

Question

I have a select with currencies like this:

<select class="new-challenge-bet-currency">
    <option value="usd">&#xf155;</option>
    <option value="eur">&#xf153;</option>
    <!-- keeps going with more currencies -->
</select>

Everything works fine on desktop browsers, and the mobile browser even displays the fa currency symbol on the selected item.

Here is a screenshot of what happens on Chrome Android. As you can see, the selected currency ($) at the top display fine, but the white box that pops up when it's time to select a different option just displays broken X boxes.

Any idea how to get them to work? Looking for a simple solution so I don't have to rework how currency selection is done all together.

Answer 1

It's not just mobile, there has historically been difficulty in styling <option> as it has been rendered by native OS widgets instead of browser DOM. If you really must completely control the presentation of a <select> box you will need to replace it with scripted element. (See select2 et al.)

However it is unclear to me why you are using Private Use Area characters with custom glyphs to render currency symbols for which there are perfectly good Unicode characters (U+0024 Dollar Sign, U+20AC Euro Sign) available. If you can use real Unicode characters (still with custom font rendering if you prefer), then they should still be usable when displayed by non-browser widgets like this.