CSS 字体上的 Font-Awesome 错误 404
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29312063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font-Awesome error 404 on fonts
提问by Non
I do not know what is going on but in the browser console I can see 3 errors related to font-awesome
我不知道发生了什么，但在浏览器控制台中我可以看到 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
I know it is ridiculous I can not figure out this by myself, but everything seems to be OK, in my index.html I have something like this
我知道这很荒谬我自己无法弄清楚，但一切似乎都很好，在我的 index.html 中我有这样的东西
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
and that's all I have related to the font-awesome thing, I already check the path and I am not wrong with that.
这就是我与字体真棒事物相关的全部内容，我已经检查了路径，我没有错。
Is this happening with any of you guys ?
你们中的任何人都发生这种情况吗？
UPDATE
更新
this is the NGINX part where I load some content in the 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;";
回答by jhoelz
Better yet, add this section to your web.config and then those mime types will be automatically added to IIS on any server you deploy to. (The remove is to avoid a duplicate mime type error in case they are already there)
更好的是，将此部分添加到您的 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>
回答by Gomes
Add the .woff to your application server mime type(e.g. iis-> mime type) as application/font-woff
将 .woff 添加到您的应用程序服务器 mime 类型（例如 iis-> mime 类型）作为 application/font-woff
回答by AngelsGR
i had the same problem with iis. I added a new mime type with ".woff2" as file extension and "font/x-woff" as mime type and the problem solved.
我在 iis 上遇到了同样的问题。我添加了一个新的 mime 类型，“.woff2”作为文件扩展名，“font/x-woff”作为 mime 类型，问题解决了。
回答by Choco Li
1.Go to IIS, find your website, find MIME Type, then click add
1.进入IIS，找到你的网站，找到MIME Type， 然后点击添加
2.Put "woff2" at Attached file name Put "application/font-woff" at Mime type
2.将“woff2”放在附加文件名处将“application/font-woff”放在Mime类型
3.Restart your website on IIS
3.在IIS上重启你的网站
回答by xengravity
The URLs you've provided are all invalid and do not link to a resource. As far as any of us will be able to tell from your post - they simply do not exist.
您提供的 URL 均无效且未链接到资源。就我们任何人都可以从您的帖子中看出 - 它们根本不存在。
Did you upload your files correctly for the intended folder structure?
您是否为预期的文件夹结构正确上传了文件？
回答by kanidrive
I was having the exact same issue on a "cPanel shared host server" that only allows for Apache2 webserver. Since wildcards (*) of the value of 'Access-Control-Allow-Origin' are not permitted by the shared host security settings (because: bandwidth & resource thieves) I had to figure out a different way to make it work.
我在只允许 Apache2 网络服务器的“cPanel 共享主机服务器”上遇到了完全相同的问题。由于共享主机安全设置不允许使用“Access-Control-Allow-Origin”值的通配符 (*)（因为：带宽和资源窃贼），我不得不想出一种不同的方法来使其工作。
This question asked by the OP infers nginx, but the accepted & most upvoted answers seem to be for IIS. There might be people (like me) who stumble upon this question looking for apache2 solutions related to CORS "permissions" in Apache, so here was the magic bullet for me to solve this issue. I added the following at the tippy-top of my root directory of a WP site in the .htaccess file:
OP 提出的这个问题推断 nginx，但接受和最受好评的答案似乎是针对 IIS 的。可能有人（像我一样）偶然发现了这个问题，在 Apache 中寻找与 CORS“权限”相关的 apache2 解决方案，所以这是我解决这个问题的灵丹妙药。我在 .htaccess 文件中 WP 站点的根目录的tippy-top添加了以下内容：
<IfModule mod_headers.c>
<IfModule mod_rewrite.c>
SetEnvIf Origin "http(s)?://(.+\.)?(othersite\.com|mywebsite\.com)(:\d{1,5})?$" CORS=BundleTable.EnableOptimizations = false;
Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
Header merge Vary "Origin"
</IfModule>
</IfModule>
I wish I could take credit for this fantastic hunk of RegEX magic, but I explain how I derived this solution in this post comment to a similar question here: Access-Control-Allow-Origin wildcard subdomains, ports and protocols
我希望我能将这个奇妙的 RegEX 魔法归功于我，但我解释了我如何在这篇文章评论中推导出这个解决方案到一个类似的问题：Access-Control-Allow-Origin 通配符子域、端口和协议
** 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
** 明显注意：您需要更改域名以匹配您自己的域名。您可以删除 (|) RegEx OR 并仅使用单个域名，其中 RegEx 接受所有子域和根级域名
回答by dmcdekker
I had the exact same problem and errors. Deleting my Font-Awesome library and installing the most up to date version took care of the issue.
我遇到了完全相同的问题和错误。删除我的 Font-Awesome 库并安装最新版本解决了这个问题。
回答by Mr. William Michael
Go to: http://fortawesome.github.io/Font-Awesome/get-started/
转到：http: //fortawesome.github.io/Font-Awesome/get-started/
...use Bootstrap CDN to add Font Awesome into your website with a single line of code. You don't even have to download or install anything!"
...使用 Bootstrap CDN 通过一行代码将 Font Awesome 添加到您的网站中。你甚至不需要下载或安装任何东西！”
回答by Luis Gouveia
None of the above solutions worked for me except the following one. Please add this line after all 'bundles.Add' commands in your BundleConfig.cs file:
除了以下解决方案外，上述解决方案均不适合我。请在 BundleConfig.cs 文件中的所有“bundles.Add”命令之后添加这一行：
##代码##回答by Anrorathod
Add the .woff2 to your application server mime type(e.g. iis-> mime type) as application/font-woff
将 .woff2 添加到您的应用程序服务器 mime 类型（例如 iis-> mime 类型）作为 application/font-woff
It worked fine for me.
它对我来说很好。
Enjoy !!!
享受 ！！！
:)
:)
