How do I set up the Zurb Foundation icons?

Question

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>

Answer 1

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

Answer 2

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

Answer 3

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