Skip to main content Skip to secondary navigation 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.

  • More articles on...
  • Code

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

Get the Weekly Digest