Kraken gets icon font tools
Kraken picked up two new tools for working with icon fonts:
- A lightweight feature test to check for browser support.
- A class for fallback text for non-supporting browsers and screen readers.
Feature Test
The feature test includes scripts by the Filament Group and Paul Irish that check for @font-face and pseudo selector support.
When supported, the test adds the .font-face class to the <html> element. You can hook into this class in your CSS to display fallback text and avoid weird characters on non-supporting browsers.
Fallback Text
The Sass version of Kraken also includes a placeholder file for working with icon fonts. This file picked up a new class, .icon-fallback-text, that you can use to add fallback text for non-supporting browsers and screen readers.