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