twitter-bootstrap 字体真棒在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16866872/
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 not working in Firefox
提问by filistea
I'm using bootstrap and I added font awesome through Less, overriding the Glyphicons. The icons display OK in chrome but in Firefox i just see boxes.
我正在使用引导程序，并通过 Less 添加了很棒的字体，覆盖了 Glyphicons。图标在 chrome 中显示正常，但在 Firefox 中我只看到框。
This is how my directory looks like
这是我的目录的样子
-- Project
-- js
-- css
-- less
-- font-awesome
-- css
-- font
-- less
All I've modified in the Project > less > boostrap.lessfile has been:
我在Project > less > boostrap.less文件中修改的所有内容是：
@import "sprites.less";
//for this line
@import "../font-awesome/less/font-awesome.less";
As I said in Chrome works fine but for some reason Firefox shows only boxes.
正如我在 Chrome 中所说的那样工作正常但由于某种原因 Firefox 只显示框。
回答by Dustin Brownell
Custom web fonts via CDN (or any cross-domain font request) doesn't work in Firefoxor Internet Explorer(correctly so, by spec) though they do work (incorrectly so) in Webkit-based browsers.
通过 CDN（或任何跨域字体请求）的自定义 Web 字体在Firefox或Internet Explorer 中不起作用（正确，根据规范），尽管它们在基于 Webkit 的浏览器中工作（错误地如此）。
You can fix this by adding headers to your page.
您可以通过向页面添加标题来解决此问题。
Apache
阿帕奇
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
Nginx
nginx
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
add_header Access-Control-Allow-Origin *;
}
Credit: http://davidwalsh.name/cdn-fonts
回答by premjg
If you want a quick and easy way to make Font-awesome work, try using CDNJS. It's free and powered by CloudFlare. CORS is supported out of the box.
如果您想要一种快速简便的方法来使 Font-awesome 工作，请尝试使用CDNJS。它是免费的，由 CloudFlare 提供支持。开箱即用支持 CORS。
Try something like this:
尝试这样的事情：
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">
回答by Ruy Diaz
If you are hosting the font on S3, you have to enable CORSon the bucket. Through AWS Management Console, edit the properties for the bucket and under Permissions click on "Add CORS Configuration". In my case, if I left the default config, it still didn't work, so I changed it to:
如果您在 S3 上托管字体，则必须在存储桶上启用 CORS。通过 AWS 管理控制台，编辑存储桶的属性，然后在权限下单击“添加 CORS 配置”。就我而言，如果我保留默认配置，它仍然不起作用，所以我将其更改为：
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
回答by fyberoptik
I was having issue with the if statement because I didn't have a $filename variable.
我对 if 语句有问题，因为我没有 $filename 变量。
But I did have similar results using:
但我确实使用了类似的结果：
location ~ /\.(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
回答by A Lee
Using a CDN as premjg suggested is the least invasive method besides hosting it yourself. The latest version of fontawesome suggests bootstrapcdn, e.g.,
除了自己托管之外，按照 premjg 的建议使用 CDN 是侵入性最小的方法。最新版本的 fontawesome建议使用 bootstrapcdn，例如，
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
As a minor note, noscript silently blocks requests to the CDN unless whitelisted, andit won't prompt you to whitelist the CDN unless your page also requests JS files from the same domain.
作为一个小纸条，无脚本默默块请求到CDN除非列入白名单，和它不会提示你到白名单中的CDN，除非你页面还要求JS来自同一个域文件。
回答by OneMohrTime
If you're like me, modifying a web.config file is something you're not allowed to touch.
如果你像我一样，修改 web.config 文件是你不允许接触的。
Try storing all the font files (.eot, .ttf, etc) into their own local folder, and link to them locally instead of the FontAwesome CDN. Cleared it up in IE and FF for me every time.
尝试将所有字体文件（.eot、.ttf 等）存储到它们自己的本地文件夹中，并在本地链接到它们，而不是 FontAwesome CDN。每次都在 IE 和 FF 中为我清除它。
@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }
回答by bkbeachlabs
If you're using wordpress and you think you've tried everything, look and see if you ever installed a Font Awesome plugin.Disable the plugin and refresh in Firefox.
如果您正在使用 wordpress 并且您认为您已经尝试了所有方法，请查看您是否安装过Font Awesome 插件。禁用插件并在 Firefox 中刷新。
This was the solution for me - the plugin's older version of font-awesome was overriding the files I was trying to update myself manually.
这是我的解决方案 - 插件的旧版本 font-awesome 覆盖了我试图手动更新的文件。
回答by Subhojit Mondal
In fonts folder please upload the following files
在字体文件夹中，请上传以下文件
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ Important glyphicons files----------------
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ 重要字形文件------ ----------
glyphicons-
halflings- regular.eot glyphicons- halflings- regular.svg glyphicons-halflings- regular.ttf glyphicons-
halflings-
regular.woff
Please upload the following files and after that you link your font-awesome.min.css in your header file.
请上传以下文件，然后在头文件中链接 font-awesome.min.css。
Here is the following link with proper files: http://goo.gl/WICQAf
这是带有适当文件的以下链接：http: //goo.gl/WICQAf
