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 #
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.