Foundation Icon Fonts 2!
Custom icon sets that are stored in a handy web font and are coded to be more accessible. A couple lines of CSS and the right markup will get you going in no time.
We designed the glyphs to be refined enough to stand alone as a simple icon, but left room for the imagination. Since you’ll be dealing with a font, the opportunities are nearly limitless. Now your icons can be any size, any color and any style available in CSS. With this release comes an entirely new set of accessibility icons and some refinements to the old ones!
How These Were Built
Here at ZURB, we’re always trying to think of new ways to innovate on our processes and methods. We thought it would be extremely useful to have access to icons without the need to save many versions or sizes for a single site. By using a font, we’ve given you the ability to have an endless number of sizes, colors and styles for the icons that you need.
How to Use Them
We've made it super easy for you to get going with these icons! Just follow these simple instructions and you'll be rockin’ in no time.
Download the Font Pack
First things first, get your mouse pointer over here and download the font sets or choose a specific font from the download area in the sidebar. →
Merge in the Styles
It's really easy to hook up the pack's stylesheets to bring your new icon web font to life. When you download the fonts, you'll be able to simply merge the stylesheets and fonts folders straight into Foundation. If you are using Sass, we've got .scss files for you! Here's what the CSS looks like:
Write Your Markup
We've used an <i> for icon elements. You just simply apply the appropriate classes that match the icon you want to use. Here's what the markup looks like:
Using More Than One?
If you want to include more than one font on a site, you can simply chain a class to it that will apply the appropriate font-family. Here's an example:
You can use some awesome CSS techniques to start exploring different styles. We've come up with a few ourselves, check them out:
Download the Fonts
We've put together some handy-dandy download packs that will easily fit right into your Foundation project!
Download All Sets
Or you can choose a specific set here:
If you haven't given Foundation a try, we highly recommend it. You'll be coding faster and better in no time!
Available on GitHub
Hop on over to the blog post to see what others are saying or to let us know what you think.
Looking for the old set?
We've depricated the old version of the icons because the implementation wasn't very accessible. If you'd still like access to them, you can Get them on Github.