How do I set up the Zurb Foundation icons?

Asked 27/1, 2014 at 15:16 Answered 1/4, 2014 at 8:30

Solved css icons zurb-foundation css-frameworks

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>

Snapshot

Demit answered 27/1, 2014 at 15:16 Comment(2)

If anyone is looking for a reference to all of the icons themselves: zurb.com/playground/foundation-icon-fonts-3#allicons – Guyton 24/3, 2016 at 21:7

Classes start with fi- rather than ft-. – Blinker 18/1, 2021 at 10:17

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

Yoko answered 27/1, 2014 at 16:17 Comment(0)

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

Slender answered 27/1, 2014 at 16:37 Comment(1)

Added copy paste answer using cdnjs – Guyton 24/3, 2016 at 21:5

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

Volga answered 1/4, 2014 at 8:30 Comment(0)

The correct way is  instead of 

Slender answered 28/1, 2014 at 7:59 Comment(1)

t vs i Read closely. – Sulphanilamide 5/8, 2014 at 4:57

Recommended topics

Hot tags