Chrome上没有显示font-awesome图标

Question

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

以下是快照：

我知道fontawesome.min.css指向../ font / ......的默认字体路径，但我已将路径名更改为＆＃34; ../fonts/"对于我的项目，仍然没有工作。图标永远不会出现。

Answer 1

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

Answer 2

bootstrap是否有效？看起来你的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>

CDN获取最新版本（4.7）：

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

Answer 3

禁用插件：“带有Google Web Fonts™的字体更改器” 我猜它是默认工具。

Answer 4

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

1. 打开您的font-awesome.min.css文件
2. 搜索webfonts，这是字体的默认父文件夹名称。如果您找到了一堆，请将每个文件替换为项目中fonts文件夹的名称。

...这样，..min.css内的字体引用指向字体所在的正确目录路径：）

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

Answer 5

必须有多个css文件。您应该包括all.min.css（或all.css），因为效果很好

Answer 6

这是因为您需要在index.html的链接标记中提供真棒字体的确切版本。 对我来说是

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

Answer 7

我只是在自己的一个站点上解决了这个问题。只有 some 个图标无效。具体来说， fa-pencil 和 fa-trash 失败。 fa-user-plus 和 fa-envelope 工作正常。

我不确定到底是什么使它混乱，但是其他css文件之一（也许是引导程序）正在与FA css混乱。我将链接移至FA CSS，使其在页面中的其他CSS链接之后出现，并且可以正常工作。我现在有铅笔和垃圾桶图标。

Answer 8

您应该禁用Chrome中的adblocking插件，它们有时可能会将Fontawesome图标误认为是广告。

Answer 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>