Chrome上没有显示font-awesome图标

Question

我遇到的问题是fontawesome Icon没有显示在Chrome上。 （Safari和Moz都工作正常）。有没有人有一个线索为什么会发生这种情况。谢谢大家。

这是快照：

我知道fontawesome.min.css指向../ font / ......的默认字体路径，但是我已经为我的项目将路径名改为“../fonts/”，仍然无法正常工作。图标永远不会显示出来。

Answer 1

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

Answer 2

引导工作吗？看起来您的Css目录是大写的，这会导致您对css文件的引用不起作用。

尝试更换

./CSS/font-awesome.民.CSS

同

./CSS/font-awesome.民.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>

CDN最新版本（4.7）：

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

Answer 3

我遇到了类似的问题，我通过以下步骤解决了这个问题：

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

...这样，你的..min.css里面的字体引用指向你的字体所在的正确目录路径:)

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

Answer 4

必须有多个css文件..你应该包括all.min.css（或）all.css，因为它运行良好

Answer 5

这是因为你需要在index.html的link标签中提供精确的字体版本。对我来说是：

<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并在您的应用程序中搜索您需要的确切版本