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>

我已经 linked cdn bootstrap link

<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 Link :- https://jsfiddle.net/17j8pxqb/

Answer 1

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

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

Answer 2

不幸的是，这是几个浏览器的老问题，尤其是 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

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-控件。

可能的解释

这可能是某种优化，其中 FF 不费心处理来自 FA-CSS 的 @font-face-declation，因为它未被使用（none 来自CSS 被引用。）。然后我的简单 <i class="fa fa-check"></i> 修复了它...

奖励："private" 字体

的另一个优势

只要在select中只使用yes或no就可以了。尝试将单词 Key 添加到您的选项中，看看有什么可能（这是一种通常无法重现的效果，但使用 Chrome 我这正是问题所在. 但我也在我的 Windows-System 中使用 FontAwesome-Font，我怀疑这是造成影响的原因。）：你最终可能会看到两次 smybol，因为 "key" 是在字体定义中用作连字以生成相同的符号。因此，专门为该用法声明字体的优点是您可以将 font-variant-ligatures: none; 添加到 CSS-Style for select 以禁用连字。

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

Font Awesome unicode icon is not working in firefox

html

html-select

font-awesome

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

解决方法：声明`font-face`

可能的解释

奖励："private" 字体

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

Font Awesome unicode icon is not working in firefox

html

html-select

font-awesome

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

解决方法：声明font-face

可能的解释

奖励："private" 字体

解决方法：声明`font-face`