如何在 Firefox 中显示 Font Awesome 图标?

Posted

技术标签:

【中文标题】如何在 Firefox 中显示 Font Awesome 图标?【英文标题】:How to display Font Awesome icons in Firefox? 【发布时间】:2013-02-11 09:23:41 【问题描述】:

我将 Font-Awesome-Sass-Rails gem 用于图标字体,它们在除 Firefox 之外的所有浏览器中都能正常显示。我目前正在使用 Cloudfront 和 nginx。这是我的 CORS 配置:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

有什么想法吗?

【问题讨论】:

【参考方案1】:

当我遇到同样的问题时,我发现唯一对我有用的解决方案是在 nginx 本身中设置一个标头。

location ~* \.(eot|otf|ttf|woff)$ 
    add_header  Access-Control-Allow-Origin *;

【讨论】:

我是否将它放在我的服务器 括号内? 我把它放在我的服务器 括号中,重新启动 nginx,它仍然显示这些毁容的框而不是图标。 您的 CSS 文件中字体文件的位置是否正确?你能提供一个链接到你的页面吗? 我刚刚放了@import "font-awesome";在我的 custom.css.scss 文件的顶部。我正在使用 font-awesome-sass-rails gem:github.com/littlebtc/font-awesome-sass-rails 字体需要位于一个名为font 的文件夹中,与您的 CSS 文件夹处于同一级别。如果字体文件不存在,它将无法工作。如果您在其他地方有它们,则需要更新 font-awesome.css 文件以更改路径。【参考方案2】:

如果上面的答案不能解决任何人的问题,那么这是我的有效解决方案:

# Cross domain webfont access
location ~* \.(?:ttf|ttc|otf|eot|woff|font.css)$ 
add_header "Access-Control-Allow-Origin" "*";
expires 1M;
access_log off;
add_header Cache-Control "public";

【讨论】:

我在哪里将它添加到我的 Rails 应用程序中? 在 nginx 配置文件中 在 apache 中怎么样?【参考方案3】:

上面的例子不起作用,这个起作用了。在 nginx 配置中,将 if 块放在 /assets/ 规则中

  location ^~ /assets/ 
    gzip_static on;
    expires max;
    add_header Cache-Control public;

    if ($request_filename ~* ^.*?\.(eot)|(ttf)|(woff)|(svg)|(otf)$) 
       add_header Access-Control-Allow-Origin *;
    
  

【讨论】:

以上是关于如何在 Firefox 中显示 Font Awesome 图标?的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap中的font awesome图标在firefox下显示不正常

如何创建像字体真棒这样的图标

Firefox 不尊重@font-face? [复制]

Font Awesome 在 Firefox 和 IE 中不起作用

如何减小字体真棒图标的大小?

Font Awesome 字体在 IE8 上显示为框