字体神奇图标在Chrome上无法显示

Question

我遇到了一个问题，就是Chrome浏览器无法显示fontawesome图标（Safari和Moz都正常工作）。有人知道为什么会这样吗？谢谢大家。

以下是快照：

我知道fontawesome.min.css的默认字体路径是../font/......，但是我已经将路径名称更改为"../fonts/"以适应我的项目，但仍然不起作用。该图标从未显示过。

- alex

---

调试的简单方法是尝试暂时使用CDN。如果图标出现，则您知道可能存在本地CSS文件路径的问题。 CDN：<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> - Kurt King

Answer 1

检查您是否已禁用广告拦截器。有时Chrome扩展程序可能会阻止浏览器显示图标。

- Satyam Dahiwal

---

有什么解决方法吗？我已经在AdBlock中禁用了“Antisocial”过滤列表，但它仍然无法正常工作。我还需要禁用“Fanboy's Annoyances”吗？ - Rajeev Desai

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/

如果您要使用最新版本，请确保查看示例，因为它们已更改了编写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">

- Kurt King

---

Kurt。我已经升级到v4.7版本，但在Chrome中仍无法正常工作。在此之前，我的Fa版本为3.2.1。 - alex

我更新了我的原始答案。如果你要使用最新版本，你改变了HTML代码吗？ - Kurt King

没错。我更新了这段代码，否则Saf和Moz将无法正确显示。 <i class="fa fa-times" aria-hidden="true"></i> - alex

只是Chrome和其他两个浏览器看起来不太一样。 - alex

这真的很有趣。你能暂时尝试使用CDN并查看是否修复了Chrome问题吗？请将href替换为https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css。 - Kurt King

Answer 3

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

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

这样，你的..min.css文件内的字体引用就指向了正确的字体目录路径 :)

我通过在incognito模式下打开chrome dev tools并查看console errors来发现这个问题。

- Rhyan Vargas

---

很好。这个解决了我的问题。 - undefined

Answer 4

禁用插件：“使用Google Web Fonts™进行字体更改” 我猜它是一个默认工具。

- Mehmet Andiç

Answer 5

这是因为您需要在 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，并在其中搜索您应用程序所需的确切版本

- agnes pious

Answer 6

我刚刚解决了自己网站上的这个问题。只有一些图标无法正常显示，具体来说是fa-pencil和fa-trash。而fa-user-plus和fa-envelope则可以正常工作。

我不确定到底是什么原因导致了这个问题，但其中一个CSS文件（可能是Bootstrap）与FA CSS发生了冲突。我将FA CSS的链接移到其他CSS链接之后，问题就得到了解决。现在我可以使用铅笔和垃圾桶图标了。

- Mike

Answer 7

必须有多个CSS文件。您应该包括all.min.css（或）all.css，因为它可以很好地工作

- Deepanshu Singh

Answer 8

你应该在 Chrome 浏览器中禁用广告拦截插件，它们有时会将 Fontawesome 图标误认为是广告。

- user11819675

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>

- parth karkar