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