Font Awesome Unicode in select option breaks on mobile

Question

I have a select with currencies like this:

$.getJSON("json/local_json_file.json", function(json) {
     //do stuff to the json object here
});

Everything works fine on desktop browsers, and the mobile browser even displays the <select class="new-challenge-bet-currency"> <option value="usd">&#xf155;</option> <option value="eur">&#xf153;</option> <!-- keeps going with more currencies --> </select> currency symbol on the fa 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

它不仅仅是移动设备，因为它已经由本机操作系统小部件而不是浏览器DOM呈现，因此在样式<option>中一直存在困难。如果你真的必须完全控制<select>框的表示，你需要用脚本元素替换它。 （见select2等人）

然而，我不清楚为什么你使用自定义字形的私人使用区域字符来呈现货币符号，其中有完美的Unicode字符（U + 0024美元符号，U + 20AC欧元符号）可用。如果您可以使用真正的Unicode字符（如果您愿意，仍然可以使用自定义字体渲染），那么当非浏览器小部件显示时，它们仍应可用。