Auxiliar de fonte do ícone Compass / Sass

Portanto, você tem algumas fontes de ícone flutuando, mas não quer mudar todos os links de referência para os arquivos de ícone e especialmente a infinidade de tipos de arquivos necessários para incluir como EOT, TTF, SVG e WOFF. Com tantos URLs para alterar, pode ser extremamente tedioso, mas não mais, pois pode ser feito em um local usando um loop Sass e a bússola@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);

Saída CSS

@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');
}