How to display Font Awesome icons in Firefox?

Question

I'm using the Font-Awesome-Sass-Rails gem for icon fonts and they display properly in all browsers but Firefox. I'm currently using Cloudfront and Nginx. Here is my CORS configuration:

<?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>

Any ideas?

score 9 · Accepted Answer · answered Jun 24 '13 at 10:43

9

If the answer above does not solve anyone's problem then here is my solution which is working :

# 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";
}

answered Jun 24 '13 at 10:43

Muntasim

6,689
3
46
69

3

Where do I add this to my rails app? – Elijah Murray Sep 20 '14 at 22:36
in the nginx conf file – Muntasim Jan 16 '15 at 12:52
how about in apache? – Marcelo Austria Nov 28 '17 at 11:47

score 1 · Answer 2 · answered Feb 26 '13 at 02:45

1

When I had the same problem I found the only solution which worked for me was setting a header within nginx itself.

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

answered Feb 26 '13 at 02:45

sjdaws

3,466
16
20

Do I place this within my server {} brackets? – Richard74 Feb 26 '13 at 03:02
I put it in my server {} brackets, restarted nginx, and it's still showing these disfigured boxes instead of the icons. – Richard74 Feb 26 '13 at 03:15
Is the location to the font file correct in your CSS file? Can you provide a link to your page? – sjdaws Feb 26 '13 at 03:24
I just placed @import "font-awesome"; at the top of my custom.css.scss file. I'm using the font-awesome-sass-rails gem: https://github.com/littlebtc/font-awesome-sass-rails – Richard74 Feb 26 '13 at 03:35
The fonts need to be in a folder called `font` on the same level as your CSS folder. If the font files aren't there it won't work. If you have them somewhere else, you need to update the `font-awesome.css` file to change the paths. – sjdaws Feb 26 '13 at 03:52

score 1 · Answer 3 · answered Jan 17 '14 at 22:13

examples above did not work, this worked. in nginx config, put if block inside /assets/ rule

  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 *;
    }
  }

How to display Font Awesome icons in Firefox?

3 Answers3

Linked