Icon Font Fallback

The jQuery plugin for replacing icon fonts with png files for browsers that don’t support webfonts.

Created by John Polacek

Fork me on GitHub

This is a icon font fallback solution for browsers that don’t support webfonts. It is designed for use with the IcoMoon Icon Font Web App. It is my hope that this plugin will soon become obsolete as mobile browsers continue to improve. So, if this seems a little bit hacky, that’s because it is. ☺

Download

Source files on github or download the zip.

How to Use

Go to IcoMoon and build your icon font set. Download both the font and the images zips. Important: This solution is only designed to work with IcoMoon’s class-based implementation (not data-)

From the images download, grab the png’s and put them in a folder in your project. By default, the fallback plugin will look for them in a img/icon directory. You can specify a different directory via the iconDir setting.

Assign a class to every instance you are using an icon font, such as .icon. Then run the fallback plugin on that selector. After it runs, the .icon-fallback class will be added so that you can add styles to the fallback replacement, such as for proper sizing.

Simple Example run »

$('.icon').iconfontFallback();
 icon-home
 icon-home-2
 icon-home-3
 icon-office
 icon-newspaper

Detecting @font-face

You can use Modernizr to detect @fontface support, then run the iconfontFallback() polyfill if necessary.

if (!Modernizr.fontface) $('.icon').iconfontFallback();

However, I found that Modernizr’s test yielded a false positive for the Android 2.1 browser, so I use Paul Irish’s original @font-face detection technique instead.

Check out this simple demo.