How do I set up the Zurb Foundation icons?

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>

Answers


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

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


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


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


Need Your Help

X-Frame-Options: ALLOW-FROM in firefox and chrome

firefox google-chrome x-frame-options clickjacking

I'm implementing a "pass-through" for X-Frame-Options to let a partner site wrap my employer's site in an iframe, as per this article: http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-