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 中无法工作。

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

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

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

Answer 1

您正在寻找的是在您的 css 文档中包含 -webkit 或 -moz。 Chrome 支持它，但对于 mozilla 支持此使用“-moz-”。

有关这方面的更多信息，请访问下面的链接，您会找到与之相关的所有内容！！ https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

Answer 2

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

 <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

Answer 3

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

解决方法：只需在页面上使用任何 `fa-style。

例子：

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

解决方法：声明font-face

在 FA 的 CSS 中添加 font-face-声明：

@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-controls。

可能的解释

这可能是某种优化，FF 不会费心处理来自 FA-CSS 的@font-face-declation，因为它没有被使用（没有引用来自 CSS 的实际样式。）。那么我的简单<i class="fa fa-check"></i> 修复了它...

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

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