How do I set up the Zurb Foundation icons?

Question 1

Foundation icons use the  tags. So you would have something like <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. ), 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; }

Question 2

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.

Quickest solution, no installation required:

<link rel="stylesheet" 
      href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>

Other versions available at https://cdnjs.com/libraries/foundicons

Question 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

Question 4

The correct way is  instead of 