字体图标库Font-Awesome无法加载，提示404错误。

Question

字体图标库Font-Awesome无法加载，提示404错误。

84

我不知道发生了什么，但在浏览器控制台中我可以看到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相关的所有内容，我已经检查了路径，我没有错。

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

图片描述

更新

这是我在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;";

- Non

1

你在服务器上上传字体了吗？ - Vucko

@Vucko 我应该怎么做？ - Non

11个回答

81

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

- Gomes

6

我需要完成两个条目的工作，一个是woff格式，另一个是woff2格式。非常成功。谢谢！ - Gaʀʀʏ

9

我曾经遇到过与IIS相关的同样问题。我添加了一个新的MIME类型，文件扩展名为“.woff2”，MIME类型为“font/x-woff”，问题得以解决。

- AngelsGR

6

1. 打开IIS，找到您的网站，找到MIME类型，然后点击添加

2. 在附加文件名称处输入“woff2”，在MIME类型处输入“application/font-woff”

3. 在IIS上重启您的网站

- Choco Li

3

您提供的URL都是无效的，没有指向任何资源。从您的帖子中我们无法得知任何信息 - 这些链接似乎并不存在。

请问您是否正确上传了文件到预期的文件夹结构中？

- xengravity

如果你说这些链接//www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0当然是有效的，这个www.desktop.just4bettors.mobi是我正在工作的页面，但是它没有获取到font-awesome部分的链接。 - Non

如何从服务器加载它？ - Non

你需要手动上传它，或者你可以尝试使用 Font Awesome CDN https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css。 - xengravity

我已经在我的项目中使用了font-awesome，我将其放在了bower_components文件夹中，并从index.html中调用它<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />。 - Non

3

我的建议是尝试快速使用CDN来解决问题。看起来你在本地引用它的方式不正确，如果你能够引用CDN并且它能够工作，那么你就知道本地的文件位置是错误的。 - xengravity

显示剩余5条评论

2

除了以下这个解决方案，我尝试了以上所有的方法都没有用。请在你的BundleConfig.cs文件中的所有'bundles.Add'命令后添加此行代码：

BundleTable.EnableOptimizations = false;

- Luis Gouveia

1

这是一种奇怪的解决woff MIME错误的方法...你关闭了捆绑优化。 - hastrb

我同意你的看法，@hastrb，这很奇怪。 - Luis Gouveia

1

我在一个仅允许Apache2 web服务器的“cPanel共享主机服务器”上遇到了完全相同的问题。由于共享主机安全设置不允许“Access-Control-Allow-Origin”的通配符(*)（因为：带宽和资源窃贼），所以我必须找出一种不同的方法使其工作。

OP提出的这个问题暗示着nginx，但被接受和点赞最多的答案似乎是针对IIS的。可能会有像我一样的人，他们在寻找与CORS“权限”相关的apache2解决方案时偶然发现了这个问题，所以这就是我解决这个问题的魔法子弹。我在一个WP网站的根目录的.htaccess文件中添加了以下内容：

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

我希望我能为这段神奇的正则表达式代码贡献一份功劳，但是我在这篇文章的评论中解释了我如何得出这个解决方案，链接在这里: Access-Control-Allow-Origin wildcard subdomains, ports and protocols

** 显然需要注意: 你需要改变域名以匹配你自己的域名。你可以删除 (|) 正则表达式中的或运算符，并只使用一个域名，其中所有子域名和根级域名都被该正则表达式接受。

- K8sN0v1c3

0

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

- dmcdekker

0

好吧，我可能晚了一步，但是......这是真正的答案：crossorigin="anonymous" referrerpolicy="no-referrer" 将此添加到您的font-awesome样式表链接中以读取为

<link type="stylesheet" href="font-awesome-css-url" crossorigin="anonymous" referrerpolicy="no-referrer">

- Gregory Bowers

-1

前往：http://fortawesome.github.io/Font-Awesome/get-started/

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

- Mr. William Michael

1

请添加说明并附上您分享的链接。 - Sourabh Kumar Sharma

7

CDN通常只适用于搭建脚手架和测试，当部署到生产环境时，最好将文件放在Web服务器上或拥有自己的CDN。 - Nickvda

如果您正在构建内部网络应用程序，这也可能不是一个好主意。 - kosherjellyfish

我认为一个好的解决方案不是告诉别人使用其他东西。 - Narshe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jhoelz · Accepted Answer

更好的做法是将以下内容添加到您的web.config中，这样这些MIME类型就会自动添加到您部署到的任何服务器上的IIS中。（使用remove是为了避免重复的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>