Font helpers for Sass

_font-icons.scss

//
// Font icons
//   
//   Demo page: [path to the demo page generated by Fontello]

// Font declaration and default styles copied from
// [path to CSS generated by Fontello] and turned into Sass.

// This path should be relative to the rendered CSS
$project-icons-path: '../fonts/project-icons/font/project-icons';

// Font declaration
@font-face {
  font-family: 'project-icons';
  src: url('#{$project-icons-path}.eot?55454851');
  src: url('#{$project-icons-path}.eot?55454851#iefix') format('embedded-opentype'),
       url('#{$project-icons-path}.woff?55454851') format('woff'),
       url('#{$project-icons-path}.ttf?55454851') format('truetype'),
       url('#{$project-icons-path}.svg?55454851#project-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}
// Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it.
// Note, that will break hinting! In other OS-es font will be not as sharp as it could be.
//
// @media screen and (-webkit-min-device-pixel-ratio:0) {
//   @font-face {
//     font-family: 'project-icons';
//     src: url('#{$project-icons-path}.svg?55454851#project-icons') format('svg');
//   }
// }

// Icon default styles
%icon-defaults {
  font-family: "project-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
 
  // For safety - reset parent styles, that can break glyph codes
  font-variant: normal;
  text-transform: none;
     
  // fix buttons height, for twitter bootstrap
  line-height: 1em;
}

// Icons map
//   icon-name: character-mapping
//
// Get authoritiative list of icons + codes in 
// /path/to/theme/fonts/project-icons/css/project-icons.css
// Each time you update the icon font, check that CSS file to add new icons 
// and make sure the name and character mappings still match.
$icons-list: (
  twitter:          '\e800',
  instagram:        '\e801',
  youtube:          '\e802',
  vimeo:            '\e803'
);
$icons-list-count: length($icons-list); // Potentially useful count of how many icons we have

// Generate placeholder classes for use in the mixin
@each $icon, $content in $icons-list {
  %icon-#{$icon}-content {
    content: $content;
  }
}

// Icon font mixin 
//  Apply this to the element you want to attach the icon to, e.g. an <a> tag.
//
//  $icon-name - Use the name as it appears in $icons-list
//  $position - Defaults to the normal "before" but you can optionally specify "after" if needed
//  @content - Within the mixin, you can add custom styles for the icon
@mixin icon($icon-name, $position: "before") {
  &:#{$position} {
    @extend %icon-defaults;
    @extend %icon-#{$icon-name}-content;
    @content;
  }
}

_fonts.scss

//
// Font families
//  Use this to quickly and easily manage multiple custom fonts
//

// This path should be relative to the rendered CSS
$fonts-path: '../fonts';

// List of fonts used
//   name_of_font: 'path_of_font'
// Please add only as many as you absolutely need!
$font-list: (
  roboto_light:        'roboto_light_macroman/Roboto-Light-webfont',
  roboto_bold:         'roboto_bold_macroman/Roboto-Bold-webfont',
  robotoslab_regular:  'robotoslab_regular_macroman/RobotoSlab-Regular-webfont'
);


// This generates the @font-face code for each font variation and uses the above map list of fonts
@each $fontname, $fontpath in $font-list {
  @font-face {
    font-family: '#{$fontname}';
    src: url('#{$fonts-path}/#{$fontpath}.eot');
    src: url('#{$fonts-path}/#{$fontpath}.eot?#iefix') format('embedded-opentype'),
         url('#{$fonts-path}/#{$fontpath}.woff') format('woff'),
         url('#{$fonts-path}/#{$fontpath}.ttf') format('truetype'),
         url('#{$fonts-path}/#{$fontpath}.svg##{$fontname}') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}

// Variables
$roboto-light: 'roboto_light', sans-serif;
$roboto-bold: 'roboto_bold', sans-serif;
$roboto-slab-regular: 'robotoslab_regular', serif;