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-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 ，因為它沒有被使用（沒有引用來自 CSS 的實際樣式。）。 然后我簡單的<i class="fa fa-check"></i>修復了它......

獎勵：“私有”字體的另一個優勢

只要你只在選擇中使用yes或no ，一切都很好。 嘗試將Key添加到您的選項中，看看有什么可能（這是一種通常無法重現的效果，但使用 Chrome 我遇到了這個問題。但我也在我的 Windows 系統中使用了 FontAwesome-Font，我懷疑這導致了效果。） ：您最終可能會看到兩次 smybol，因為“key”在字體定義中用作連字以生成相同的符號。 因此，專門為該用途聲明 font-face 的優點是您可以添加font-variant-ligatures: none; 到 CSS 樣式以select禁用連字。

Answer 3

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

有關這方面的更多信息，請訪問下面的鏈接，您將找到與之相關的所有內容！！ https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions