Font-Awesome 字体错误 404

Question

我不知道发生了什么，但在浏览器控制台中我可以看到 3 个与 font-awesome

相关的错误

 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0

我知道这很荒谬我无法自己弄清楚，但一切似乎都很好，在我的 index.html 我有这样的东西

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

这就是我与 font-awesome 相关的所有内容，我已经检查了路径，我没有错。

你们中有人遇到过这种情况吗？

更新

这是我在 headers

中加载一些内容的 NGINX 部分

add_header Content-Security-Policy "style-src 'self' 'unsafe-inline'
https://fonts.googleapis.com
https://fonts.gstatic.com
https://themes.googleusercontent.com
https://assets.zendesk.com;
font-src 'self' https://themes.googleusercontent.com
https://fonts.gstatic.com;";

Answer 1

您提供的 URL 均无效，并且未 link 资源。就我们中的任何一个人而言，从您的 post 中可以看出 - 它们根本不存在。

您上传的文件是否符合预期的文件夹结构？

Answer 2

将 .woff 添加到您的应用程序服务器 mime 类型（例如 iis-> mime 类型）作为 application/font-woff

Answer 3

我和 iis 有同样的问题。我添加了一个新的 mime 类型，文件扩展名为“.woff2”，mime 类型为 "font/x-woff"，问题就解决了。

Answer 4

转到：http://fortawesome.github.io/Font-Awesome/get-started/

...使用 Bootstrap CDN 只需一行代码即可将 Font Awesome 添加到您的网站。您甚至不需要下载或安装任何东西！"

Answer 5

更好的是，将此部分添加到您的 web.config，然后这些 mime 类型将自动添加到您部署到的任何服务器上的 IIS。（删除是为了避免重复的 mime 类型错误，以防它们已经存在）

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/x-woff" />
    </staticContent>  
  </system.webServer>

Answer 6

1.Go到IIS，找到你的网站，找到MIME Type， then click add

2.Put "woff2" 在附件名将 "application/font-woff" 置于 Mime 类型

3.Restart 您在 IIS 上的网站

Answer 7

我遇到了完全相同的问题和错误。删除我的 Font-Awesome 库并安装最新版本解决了这个问题。

Answer 8

我在只允许 Apache2 网络服务器的 "cPanel shared host server" 上遇到了完全相同的问题。由于共享主机安全设置不允许 'Access-Control-Allow-Origin' 值的通配符 (*)（因为：带宽和资源窃贼）我不得不想出一种不同的方法来使其工作。

OP 提出的这个问题推断出 nginx，但接受和最多投票的答案似乎是针对 IIS 的。可能有人（像我一样）偶然发现了这个问题，他们在 Apache 中寻找与 CORS "permissions" 相关的 apache2 解决方案，所以这是我解决这个问题的灵丹妙药。我在 .htaccess 文件中的 WP 站点根目录的顶部添加了以下内容：

<IfModule mod_headers.c>
 <IfModule mod_rewrite.c>
    SetEnvIf Origin "http(s)?://(.+\.)?(othersite\.com|mywebsite\.com)(:\d{1,5})?$" CORS=[=10=]
    Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
    Header merge  Vary "Origin"
 </IfModule>
</IfModule>

我希望我能把这个神奇的 RegEX 魔法归功于我，但我在 post 对类似问题的评论中解释了我是如何得出这个解决方案的：Access-Control-Allow-Origin wildcard subdomains, ports and protocols

** Obvious NOTE: You need to change the domain name to match your own. You can remove the (|) RegEx OR and just use a single domain name in which ALL subdomains AND the root level domain name are accepted by the RegEx

Answer 9

将 .woff2 添加到您的应用程序服务器 mime 类型（例如 iis-> mime 类型）作为 application/font-woff

对我来说效果很好。

尽情享受吧!!!

:)

Answer 10

None 以上解决方案对我有用，但以下解决方案除外。请在 BundleConfig.cs 文件中的所有 'bundles.Add' 命令之后添加此行：

BundleTable.EnableOptimizations = false;

Font-Awesome 字体错误 404

Font-Awesome error 404 on fonts

css

fonts

font-awesome