Design Great Products Faster
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!
settings
heart
star
plus
minus
checkmark
remove
mail
calendar
page
tools
globe
cloud
error
right-arrow
left-arrow
up-arrow
down-arrow
trash
add-doc
edit
lock
unlock
refresh
paper-clip
video
photo
graph
idea
mic
cart
address-book
compass
flag
location
clock
folder
inbox
website
smiley
search
phone
thumb-up
thumb-down
rss
facebook
twitter
pinterest
github
path
linkedin
dribbble
stumble-upon
behance
reddit
google-plus
youtube
vimeo
clickr
slideshare
picassa
skype
instagram
foursquare
delicious
chat
torso
tumblr
video-chat
digg
wordpress
wheelchair
speaker
fontsize
eject
view-mode
eyeball
asl
person
question
adult
child
glasses
cc
blind
braille
iphone-home
w3c
css
key
hearing-impaired
male
female
network
guidedog
universal-access
elevator
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:
Style Away!
You can use some awesome CSS techniques to start exploring different styles. We've come up with a few ourselves, check them out:
Like
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:
Try Foundation
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
We've put these Icons on Github to make maintenance and issue tracking as easy as possible. You can pop it open right in GitHub for Mac, here »
Thoughts?
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.
