My Foundation Icons are not working in Firefox. Only letters in a box display instead

Question

The Html

<link rel=stylesheet href=../static/css/foundation-icons/foundation-icons.css>

<a class="button radius search-header"><i class="fi-magnifying-glass"></i> Search</a>

I have navigated to foundation-icons.css after hitting Ctrl+U within Firefox so I am definitely linking to the file correctly.

I have copied the foundation-icons folder exactly and not removed anything. It looks like this:

./static/css/foundation-icons/
 - foundation-icons.css
 - foundation-icons.eot
 - foundation-icons.svg
 - foundation-icons.ttf
 - foundation-icons.woff
 - svgs/*
 - preview.html

Edit: I have changed the title and added the Firefox tag because everything seems to be working fine in Chromium. I am a little stumped because that means it's a Firefox issue and probably not possible for me to fix.

The preview.html file that comes with foundation-icons works correctly in my Firefox as well.

Answer 1

If you're using the SCSS files, you should point the $fi-path variable to the correct location of your foundation-icon-fonts folder.

For me I had to add the following before importing foundation-icon-fonts:

$fi-path: 'foundation-icon-fonts';

Answer 2

First correct this:

<link rel="stylesheet" href="../static/css/foundation-icons/foundation-icons.css">

In examples of Foundation, Firefox use .woff files. Check if you have access to them.

It's a relative path. Are you sure 'static' folder is reachable with your browser ?