Question

我正在开发一个网页，并发现FontAwesome是一种非常巧妙的方式来添加漂亮的图标，但默认情况下，Firefox的NoScript plugin会阻止字体下载。

对于普通字体，这不是问题，但FontAwesome使用的unicode字符故意超出大多数字体的常规可打印范围，因此向CSS添加字体堆栈（EG：font-family: FontAwesome, sans-serif;）将不起作用因为所有图标都呈现为十六进制正方形。

我意识到我可以调整NoScript以允许字体下载，但这不是所有用户的理想解决方案 - 我宁愿页面优雅地降级。

当然，使用Javascript / jQuery很容易做到这一点，但当然如果它的 NoScript 做了阻止而没有帮助或者，如果用户没有启用javascript，它将无法通过测试。

什么是理想的是有一些CSS样式/规则作为任何FontAwesome对象的后备，用一些基本字符替换它们甚至不显示任何东西。

对于那些不熟悉FontAwesome / TL的人; DR：

所有FontAwesome图标都有CSS类＆＃34; fa＆＃34;：

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

FontAwesome像这样加载自定义字体（我删除了

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

然后一个特定的FontAwesome图标将有自己的特定类来插入相关的unicode字符，例如：

.fa-star:before {
    content: "";
}

图标的HTML将如下所示：

<i class="fa fa-star"></i>

所以这里的问题是： 我们需要一些方法，最好是在CSS中，用CSS类替换，删除或隐藏项目的内容＆＃34; fa＆＃34;如果字体＆＃34; FontAwesome＆＃34;没有加载。

Answer 1

解决此问题的一种方法是为<noscript>个用户提供另一个CSS文件，并覆盖图片或精灵的.fa-*类。

例如：

<noscript>
<link rel="stylesheet" type="text/css" href="safe-icons.css" />
</noscript>

您的safe-icons.css文件可能如下所示：

.fa {
    display: inline-block;
    overflow: hidden;
    color: transparent;
    font-family: sans-serif;
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
}

.fa-star { background-image: url('star.png'); }

当然，您将遇到处理从FontAwesome中提取的具有不同大小的图标的问题，但这肯定会取得平衡，并且至少为启用NoScript的用户呈现内容。

Answer 2

好吧，我想想我解决了这个问题，感谢你们带领我朝着正确的方向前进：

在头脑中，我把它放了：

<noscript>
    <style>
        [class*="fa-"]:before
        {
            content:"+";
        }
    </style>
</noscript>

这将选择每个fa-icon类项目，这些项目都在模式中定义：

.fa-heart:before {
  content: "\f004";
}

并用通用字符替换内容，或者实际上我们可能需要插入的任何其他内容（包括任何内容）。

这看起来是否合理，或者我在这里错过了一些可怕的副作用？

我意识到有人可能会阻止字体加载但启用了javascript，但是现在我很乐意忽略该客户的人口统计数据;）

编辑以添加：

在这段时间之后，这个答案仍然得到了投票（谢谢！），显然它仍然是一个问题，所以我想我会发布这个链接，以各种方式大大改进（和修剪）FontAwesome： FontAwesome Fixed

我最喜欢的是将选定的图标嵌入到内联Base64编码的SVG中，无论是在HTML还是CSS中。这看起来非常优雅和高效，特别是如果您只需要一组图标。 FA对我来说仍然是一种软糖。

Answer 3

我最近遇到了启用JS的问题，但用户使用的是安全网络，可以阻止所有网络字体或FA特定。

为了解决这个问题，我使用了类似的to this：

function css(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

window.onload = function () {
  var span = document.createElement('span');

  span.className = 'fa';
  span.style.display = 'none';
  document.body.insertBefore(span, document.body.firstChild);

  if ((css(span, 'font-family')) !== 'FontAwesome') {
    // add a local fallback
  }
  document.body.removeChild(span);
};

基本上，它有点jQuery在页面上创建一个FA元素并检查字体是否正确加载。如果没有，您可以实施回退。就我而言，后备是插入带有通用占位符图形的<img>标记。

它不是纯CSS，但它（1）允许更强大的后备措施，（2）涵盖的场景多于<noscript>

Answer 4

我意识到这是一个古老的问题，但我最近来到这里想知道类似的问题。
我设法通过自己 hosting 图标解决了我的问题。

<块引用>

遵循上述托管指南后我自己的 html 示例。

 <head>
    <link rel="stylesheet" href="assets/css/all.css">
 </head>

 <footer>
    <a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
    <a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a>
 </footer>

如果字体下载被阻止，则从FontAwesome回退

4 个答案: