These social icons are quite easy to use. One of the simplest ways is to simply use them as inline anchors to social networks, such as if we wanted to have you Like us on Facebook like us on Facebook.
Since Foundation includes some simple affordances for link lists, we could create a very simple social / support toolbar using the ul.link-list element.
Why use this and not the built in Like, Follow, etc buttons? Consider this blog post we wrote about the dangers of using those in a responsive site.
Each icon has three sizes: .small, regular (no class) and .large. They are all inline so, they can be used however you'd like, and those three sizes all have PNG fallbacks for older browsers.
Like us on Facebook Like us on Facebook Like us on Facebook
You can use custom sizes, since the SVG can scale to any resolution, but be mindful that custom sizes will not include an appropriate PNG fallback.
In this example download you'll find everything you need. The /images folder contains a folder called /fairhead-icons with all of the SVG icons as well as the PNG fallbacks for IE7 and IE8.
On top of that you'll need stylesheets/fc-webicons.css which includes all of the styles for the icon anchors, and you'll also need javascripts/foundation/modernizr.foundation.js. You can use your own version of Modernizr, but be sure it includes the SVG toolkit.
These examples are shown on a Foundation 3 page, and this code pack includes all of Foundation 3. If you'd like to try out more of Foundation, check out the Foundation website, which includes complete documentation and examples.
Once you've exhausted the fun in this example and on the Foundation site, you should check out: