html - Font Awesome unicode 图标在 Firefox 中不起作用

Question

这是我的 html 代码。

  <label><b>Phone Verified : </b></label>
  <select class="form-control phone_verified">
      <option value="">Select Option</option>
      <option value="1">Yes (&#xf00c;)</option>
      <option value="0">No (&#xf00d;)</option>
  </select>

我已经链接了cdn bootstrap链接

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<style type="text/css">
  select  {
  font-family: 'FontAwesome', 'open sans'
}
</style>

在我的 chrome 浏览器 中，图标运行完美。

但在 firefox 中不 工作。

我关注了这个font awesome icon in select option

谁能告诉我我做错了什么？

检查 JSFiddle 链接:- https://jsfiddle.net/17j8pxqb/

Answer 1

不幸的是，这是几个浏览器的老问题，尤其是 Mac OS X 上的 Firefox。有一个 hack，您可以将“multiple”属性添加到 select 标签，但这会改变下拉框的性质，并且可以导致用户输入不需要的内容。

 <select multiple class="form-control phone_verified">
  <option value="">Select Option</option>
  <option value="1">Yes (&#xf00c;)</option>
  <option value="0">No (&#xf00d;)</option>
  </select>

Working solution on Fiddle

Issue on Github