FONT Firefox中无法使用强大的Unicode图标 [英] Font Awesome unicode icon is not working in firefox

问题描述

这是我的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

有人能告诉我我做错了什么吗？

检查JSF目标链接：-https://jsfiddle.net/17j8pxqb/

推荐答案

我有一个解决办法、一个解决方案和一些发生这种情况的原因...

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

示例：

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>修复了它...

额外好处："私人"字体的另一个优势

只要在SELECT中只使用yes或no，一切都很好。尝试将单词Key添加到您的选项中，看看有什么可能(这是一种通常不能重现的效果，但使用Chrome Ihad就是这个问题。但我也在我的Windows系统中使用FontAwese-Font，我怀疑这是导致该效果的原因。)：您最终可能会看到两次smybol，因为"key"在字体定义中用作连字以生成相同的符号。因此，声明专门用于该用法字体的好处在于，您可以将font-variant-ligatures: none;添加到select的css-style以禁用连字。

这篇关于FONT Firefox中无法使用强大的Unicode图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！