how to use Foundation 5.0 icons fonts in Expression Engine

Question

i download foundation 5 font icons and pest this unzipped files into my styles folder,

1. foundation-icons.eot

2. foundation-icons.woff

3. foundation-icons.ttf

4. foundation-icons.svg

5. foundation-icons.css

6. and svg folder

i link the foundation-icons.css

<link href="{stylesheet=styles/foundation-icons}" rel="stylesheet">

but when i call the icons, <i class="fi-battery-empty">helo icon bettery</i>

i end up with unshaped icons

all my css foundation icon styles are all linked properly but i only get a square box icon to all icons i link it in site

Answer 1

at the root of your site, create a fonts folder and unzip your foundation icons there, so you'll have it like this

fonts/foundation-icons

then at the head section of your site just do something like

<link rel="stylesheet" href="{site_url}fonts/foundation-icons/foundation-icons.css" />

That should work.

I don't think its necessary to put the foundation fonts css file inside your expressionengine templates, but even if you do, just make sure the file is pointing to the correct fonts directory