fontastic via sass

style.scss

/* arquivo de variaveis -> _variaveis.scss */
$icons: ("connected":"\61", "disconnected":"\62") !default;
$file: 'untitled-font-1';
$path: '../fonts/' + $file;
$location: ('eot': $path + '.eot', 'woff': $path + '.woff', 'ttf': $path + '.ttf', 'svg': $path + '.svg') !default;

/* arquivo de funções no mixin -> mixin/_function.scss */
@function urlIndetification($url) {
  $newKey: '';
  $format: '';
  $newUrl: '';
  @each $key, $value in $url {
    @if ($key == 'eot') {
      $newKey: $value + '?#iefix';
      $format: 'embedded-opentype';
    } @else if ($key == 'svg') {
      $newKey: $value + '#untiled-font-1';
      $format: 'svg';
    } @else {
      $newKey: $value;
      @if ($key == 'woff') {
        $format: 'woff';
      } @else if ($key == 'ttf') {
        $format: 'truetype';
      }
    }
    @if ($key == 'eot') {
      $newUrl: url($newKey) + ' format(' + $format + '), '
    } @else if ($key == 'svg') {
      $newUrl: $newUrl + url($newKey) +  ' format(' + $format + ')'
    } @else {
      $newUrl: $newUrl + url($newKey) +  ' format(' + $format + '), '
    }
  }
  @return $newUrl;
}

@function eot($url){
  @return map-get($url,'eot');
}

/* arquivo de icones do mixin -> mixin/_icons.scss */
@mixin font() {
  font-family: $file;
  src: eot($location);
  src: urlIndetification($location);
  font-weight: normal;
  font-style: normal;
}

@mixin class() {
  font-family: $file !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* arquivo de icones -> _icons.scss */
@charset "UTF-8";
@font-face {
  @include font();
}

[data-icon]:before {
  content: attr(data-icon);
  @include class();
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  @include class();
}

@each $key, $value in $icons {
  .icon-#{$key}:before {
    content: $value;
  }
}