As of today we've included a whole new accessibility icon set for you to use! To go along with this new accessibility icon set we've also made the markup more semantic, the CSS cleaner and we've included SCSS for those that love Sass like we do.
A couple months ago, we created a sweet set of icon fonts that fit right into Foundation for people to use anywhere! We soon realized that our implementation could be better and more accessible for things like screen readers.
The problem with our original implementation was that it relied on random letters to display the icon. This didn't add any meaning to the markup, nor was it very obvious which letter mapped to which icon. More and more icon fonts kept appearing across the web and we thought it was time to standardize how people use them. After looking at a bunch of different implementation options, we settled on a simple implementation that uses CSS psuedo selectors and an IE7 specific stylesheet for browser support.
What's the benefit again?
By having glyphs that exist as a font, you get the advantage of scalability. Now you can have icons ready to go in any size, color and style. You can even use some awesome CSS text styles, such as shadows and gradients, to make them feel less like a glyph. Forget about copy and pasting from Illustrator to Photoshop only to have the pixel edges look fuzzy. Now you'll get the same crispness that you get out of any font rendered on the web.
Refactoring, FTW!
This has been a big week of refactoring for Foundation. On top of these icons, we completely refactored the Foundation Github repository to be easier for people to contribute and understand. We care a lot about the people that use Foundation and want to give you the best! We've also pushed a new version of Foundation 3 that is available for public consumption today! This release includes lots of bug fixes and a couple new features, like a media query toggler and layout options for block-grids.
Download it Today
We're showcasing our icons font sets on our playground. Get over there and download it. We'd love to hear any suggestions for glyphs to include in more set to come!
Visit the playground page »