0

My Search Button with a broken icon

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.

Nicholas Kolatsis
  • 427
  • 1
  • 5
  • 9

2 Answers2

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';
Hakim
  • 3,225
  • 5
  • 37
  • 75
0

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 ?

fdglefevre
  • 672
  • 4
  • 15
  • Yes it is. Like I said I navigated to the actual css files from within firefox to check if it works. I just checked with an absolute path and it is the same deal. Also since the icon renders in Chromium I can assume all paths are correct. – Nicholas Kolatsis Mar 29 '15 at 23:14