Compass/Sass Icon Font Helper

So you've got a few icon fonts floating around, but don't wanna change all the reference links for the icon files and especially the multitude of file types needed to include like EOT, TTF, SVG, & WOFF. With so many URLs to change it can be extremely tedious, but not anymore as it can be done in one spot using a Sass loop and the compass @include font-face</code> helper function. This will require a bit of configuration on your part depending on your project and workflow settings.

Sass

// ICON FONTS
// In order to set you must have the following...
// 1. A Compass @import rule (i.e. @import "compass") before
// this stylesheet or from within webthang.scss.
// 2. [OPTIONAL STEP] Name your fonts directory folder if you do not have one
// 3. Specify within your 'config.rb' file the following line...
//
//      fonts_dir = "name-of-your-fonts-directory"
//
// $icon-fonts can then be called from another stylesheet either before or after this
// very stylesheet you're reading right now. Change at will captain!
// default: $icon-fonts: null;
// ex.1) $icon-fonts: (icon-name);
// ex.2) $icon-fonts: (icon-name1, icon-name2, icon-name3);
$icon-fonts: null;
@if ($icon-fonts != null) {
    @each $font in $icon-fonts {
        @include font-face( $font,
            font-files(
                '#{$font}/#{$font}.woff',
                '#{$font}/#{$font}.ttf',
                '#{$font}/#{$font}.svg', svg
            ),
            '#{$font}/#{$font}.eot'
        )
    }
}

//Your custom override
$icon-fonts: (icon-font-name, another-icon-font-name);

CSS Output

@font-face {
    font-family: "icon-font-name";
    src: url('//fonts/icon-font-name/icon-font-name.eot');
    src: url('//fonts/icon-font-name/icon-font-name.eot?#iefix') format('eot'), url('//fonts/icon-font-name/icon-font-name.woff') format('woff'), url('//fonts/icon-font-name/icon-font-name.ttf') format('truetype'), url('//fonts/icon-font-name/icon-font-name.svg') format('svg');
}

@font-face {
    font-family: "another-icon-font-name";
    src: url('//fonts/another-icon-font-name/another-icon-font-name.eot');
    src: url('//fonts/another-icon-font-name/another-icon-font-name.eot?#iefix') format('eot'), url('//fonts/another-icon-font-name/another-icon-font-name.woff') format('woff'), url('//fonts/another-icon-font-name/another-icon-font-name.ttf') format('truetype'), url('//fonts/another-icon-font-name/another-icon-font-name.svg') format('svg');
}