Font Awesome Unicode图标在Firefox中无法显示求助

嘿，我知道这个问题咋回事！Firefox对<select>元素的字体处理和Chrome不一样，你的代码里的字体声明在Firefox里没生效，所以图标出不来。

为啥会这样？ #

Chrome会乖乖按照你设置的font-family加载字体，但Firefox有个小特性——它会优先用系统默认的下拉菜单字体，直接忽略你给<select>加的自定义字体，除非你强制它听你的。

怎么修复？ #

很简单，只要调整CSS的写法，把字体声明的优先级拉满就行：

1. 给字体声明加!important
   把原来的CSS改成这样，强制Firefox优先加载指定字体：

   select.phone_verified {
     font-family: 'FontAwesome', 'open sans', sans-serif !important;
   }
   

2. （可选）确认图标实体兼容性
   你用的十六进制实体和是正确的，但如果还是有异常，可以试试保持实体写法不变，确保CDN字体加载顺序正确（你已经把CSS放在CDN链接之后，这部分没问题）。

完整修复后的代码示例 #

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

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

额外小提示 #

如果还是没效果，检查一下浏览器有没有阻止外部字体加载（比如隐私模式下的字体限制），或者确认Font Awesome的CDN链接能正常访问。4.6.1版本的Font Awesome对Firefox的兼容性是没问题的，主要就是字体优先级的问题。

内容的提问来源于stack exchange，提问作者Dilip Hirapara