Take the 2-minute tour ×

I have downloaded the Zurb Foundation icon fonts files http://zurb.com/playground/foundation-icon-fonts-3

I unzipped them and placed the /foundation-icons folder into my /css folder. Is this correct? I am trying to follow the documentation "How to use them" section and i can't figure out how to start using the classes.

I am doing this in my .html to call the classes.

<a class=".fi-social-facebook">Facebook</a>  

so i assume i must of not configured/set up my file font properly.

Update: This is what my directory looks like... i am referencing it
and this is how I am calling the class.

<i class="ft-social-facebook"></i><a href="#">Facebook</a>
<i class="ft-star"></i>


share|improve this question

4 Answers 4

Foundation icons use the <i> tags. So you would have something like <i class="fi-social-facebook"></i><a href="http://facebook.com">Facebook</a>.

In the zip that you downloaded, there is a preview.html file. Open it in your editor and look it over. It will make a little more sense.

Also, their CSS file doesn't include sizes. So when you use their examples to change the size (ex. <i class="fi-calendar size-24"></i>), nothing will change. In looking at their preview.html file, they had those sizes defined in the header. So I copied them out and put them in my CSS and solved the issue. Here they are if you want to use them:

.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
share|improve this answer
I updated my question –  Beast_Code Jan 28 at 1:43

Once you've downloaded the pack, you have to add to your <head> :

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

And be sure that the svgs folder inside your css folder, and the rest of files inside your css folder too.

When you finish this set up, try this on your html:

<i class="fi-star"></i>

It should print a star.

share|improve this answer
I updated my question. –  Beast_Code Jan 28 at 1:44
Thanks a lot !!! –  PlayHardGoPro Mar 31 at 4:10
Grazie, this worked for me –  Fabii Sep 10 at 3:04
Happy to help you! –  ManelMusti Sep 10 at 9:38

I installed via pip install django-zurb-foundation and was running into the same problem …/foundation/icons worked, but I couldn't reference them in my actual project. What wound up working for me is adding the following to my project's base.html

{% load foundation_tags %}

{% block css %}
{% foundation_css 'foundation-icons' %}
{% endblock css %}

Which is effectively the same as ManelMusti's answer, but handled in the template using the same technique as the example in …/site_packages/foundation/templates/foundation/icons.html

share|improve this answer

The correct way is <i class="fi-star"></i> instead of <i class="ft-star"></i>

share|improve this answer
These are identical. –  Subjective Effect Jun 22 at 14:09
"fi" isntead of "ft" –  ManelMusti Jun 23 at 9:49
t vs i Read closely. –  Shadoath Aug 5 at 4:57

Your Answer


