【问题标题】:The font-awesome icon does not show up on Chrome字体真棒图标未显示在 Chrome 上
【发布时间】:2017-11-06 05:31:12
【问题描述】:

我遇到了 fontawesome 图标没有显示在 Chrome 上的问题。 (Safari 和 Moz 都可以正常工作)。有没有人知道为什么会这样。谢谢大家。

这是快照:

我知道 fontawesome.min.css 指向的默认字体路径 ../font/......,但我已将项目的路径名更改为“../fonts/”,但仍然没有不工作。图标永远不会出现。

【问题讨论】:

  • 一种简单的调试方法是暂时尝试使用 CDN。如果出现该图标,则您知道您的 css 文件本地副本的路径可能存在问题。 CDN :

标签: font-awesome


【解决方案1】:

检查您是否禁用了 Adblocker。有时 chrome 扩展程序会阻止浏览器显示图标。

【讨论】:

  • 有什么解决方法吗?我在 AdBlock 中禁用了 Antisocial 过滤器列表。它仍然不起作用。我是否还必须禁用Fanboy's Annoyances
【解决方案2】:

引导程序是否有效?看起来您的 Css 目录是大写的,这会导致您对 css 文件的引用不起作用。

尝试替换

./css/font-awesome.min.css

./Css/font-awesome.min.css

正如您在原始问题的评论中所提到的,您可以暂时尝试使用 CDN 来查看图标是否出现。如果使用 CDN 确实出现了该图标,那么您知道您的路径存在问题,就像我上面提到的那样。

这是您将用于 CDN(版本 3.2.1)的 html 代码:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

除此之外,您还使用了过时的 font-awesome 版本。如果可能的话,我建议升级到最新版本。您可以通过访问以下链接找到有关最新版本的更多信息。

http://fontawesome.io/get-started/

如果您要使用最新版本,请务必查看examples,因为他们已经改变了您编写 html 代码的方式。

更新 Font-awesome 后编辑:

如果你要使用最新版的font-awesome,你需要把HTML代码改成

<i class="fa fa-times" aria-hidden="true"></i>

最新版本 (4.7) 的 CDN:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

【讨论】:

  • 嗨,Kurt,引导程序工作正常。我刚刚检查了 safari 和 moz 上的其他浏览器。这两个效果很好。只是 Chrome 什么都没有。
  • 你能告诉我你使用的是什么版本的 font-awesome 吗?
  • 库尔特。我已更新到 v4.7,但仍然无法在 Chrome 中运行。我的Fa版本是3.2.1之前
  • 我更新了我原来的答案。如果你要使用最新的版本,你是不是改了html代码?
  • 是的。 。我更新了这段代码。否则 Saf 和 Moz 不会显示正确。
【解决方案3】:

我遇到了类似的问题,我通过以下步骤解决了它:

  1. 打开您的font-awesome.min.css 文件
  2. 搜索webfonts,这是字体的默认父文件夹名称。如果你找到了一堆,然后用你的项目中的fonts 文件夹的名称替换它们。

...这样,..min.css 中的字体引用指向字体所在的正确目录路径:)

我通过在incognito 模式下打开chrome dev tools 并查看console errors 发现了这一点。

【讨论】:

    【解决方案4】:

    禁用插件:“Font Changer with Google Web Fonts™” 我猜它是作为默认工具提供的。

    【讨论】:

      【解决方案5】:

      必须有多个 css 文件。你应该包括 all.min.css(或)all.css,因为它运行良好

      【讨论】:

        【解决方案6】:

        这是因为您需要在 index.html 的链接标签中提供 font awesome 的确切版本。 对我来说是:

        <link rel="stylesheet" 
              href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
              integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
              crossorigin="anonymous">
        

        您也可以访问https://fontawesome.com/start 并在您的应用程序中搜索您需要的确切版本

        【讨论】:

          【解决方案7】:

          我刚刚在我自己的一个网站上解决了这个问题。只有 一些 图标不起作用。 fa-pencilfa-trash,特别是失败了。 fa-user-plusfa-envelope 工作正常。

          我不确定到底是什么弄乱了它,但是其他 css 文件之一(可能是引导程序)弄乱了 FA css。我将链接移至 FA css,因此它位于页面中其他 css 链接之后,并且有效。我现在有了铅笔和垃圾桶图标。

          【讨论】:

            【解决方案8】:

            您应该禁用 chrome 中的广告拦截插件,它们有时会将 Fontawesome 图标误认为是广告。

            【讨论】:

              【解决方案9】:

              只需从你的 fontawesome 文件夹中添加 brand.js、solid.js、fontawesome.js 文件,它确实对我有用。

              <script defer src="../fontawesome/js/brands.js"></script>
              <script defer src="../fontawesome/js/solid.js"></script>
              <script defer src="../fontawesome/js/fontawesome.js"></script>
              

              【讨论】: