Skip to main content Accessibility Feedback

Kraken gets icon font tools

Kraken picked up two new tools for working with icon fonts:

  1. A lightweight feature test to check for browser support.
  2. 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.

Get Kraken on GitHub.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips