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 引导程序链接

<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 中不起作用。

我在选择选项中遵循了这个字体真棒图标

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

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

Answer 1

不幸的是，这是几个浏览器的老问题，尤其是 Mac OS X 上的 Firefox。有一个技巧，您可以在选择标记中添加“多个”属性，但这会改变下拉框的性质，并可能导致不需要的来自用户的输入。

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

Fiddle 上的工作解决方案

Github 上的问题

Answer 2

我有一个解决方法，一个解决方案以及一些为什么会发生这种情况的推理......

解决方法：只需在页面上使用任何“fa 样式”即可。

例子：

https://jsfiddle.net/mbaas/zLapqy3u/

解决办法：声明font-face

添加font-face来自 FA 的 CSS 的 - 声明：

@font-face
{
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');
    src: url('../fonts/fontawesome-webfont.eot?v=4.6.1');
}

请注意，此代码引用了一些您也需要提供的字体文件。

实际上...建议不要调用此字体FontAwesome，因为它可能与 FA 重叠并导致意外的副作用。最好使用唯一的名称。需要明确的是：

@font-face
{
    font-family: 'FontAwesome_Dilip';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');
    src: url('../fonts/fontawesome-webfont.eot?v=4.6.1');
}

和

select { font-family: 'FontAwesome_Dilip 字体', 'open sans' }

另外，我想建议对该字体系列使用特定的样式，而不是将其应用于所有select控件。

可能的解释

这可能是某种优化，其中 FF 不费心处理@font-face-declationFA-CSS，因为它没有被使用（没有引用 CSS 中的任何实际样式。）。然后我的简单<i class="fa fa-check"></i>修复了它......

奖励：“私有”字体的另一个优点

只要你只在 select 中使用yesor ，一切都很好。no尝试将这个词添加Key到您的选项中，看看有什么可能（这是一种通常无法重现的效果，但使用 Chrome 我遇到了这个问题。但我也在我的 Windows 系统中使用 FontAwesome-Font ，我怀疑这导致了这种效果。）：您最终可能会看到 smybol 两次，因为“key”在字体定义中用作连字来生成相同的符号。因此，专门针对该用途声明 font-face 的优点是您可以添加font-variant-ligatures: none;到 CSS 样式以select禁用连字。