// #############################################################################
// CUSTOM ICONS

// this file generates custom icons into /private/sass/layout/_iconfont.scss
@font-face {
    font-family: "<%= fontName %>";
    src: url("<%= fontPath %><%= fontName %>.eot?v=0.1.0");
    src: url("<%= fontPath %><%= fontName %>.eot?v=0.1.0#iefix") format("eot"),
         url("<%= fontPath %><%= fontName %>.woff?v=0.1.0") format("woff"),
         url("<%= fontPath %><%= fontName %>.ttf?v=0.1.0") format("truetype"),
         url("<%= fontPath %><%= fontName %>.svg?v=0.1.0#<%= fontName %>") format("svg");
    font-weight: normal;
    font-style: normal;
}

%icon {
    display: inline-block;
    font: normal normal normal 14px/1 <%= fontName %>;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

@function icon-char($filename) {
    $char: "";
<% _.each(glyphs, function(glyph) { %>
    @if $filename == <%= glyph.fileName %> {
        $char: "<%= glyph.codePoint %>";
    }<% }); %>

    @return $char;
}

.icon {
    @extend %icon;
}
@mixin icon($filename, $insert: before) {
    &:#{$insert} {
        content: #{"\"\\"}#{icon-char($filename) + "\""};
    }
}

// #############################################################################
// ICONS:start
// use unicode characters for accessibility reasons and use aria-hidden="true"
// for decorative icons
// DOCS: http://filamentgroup.com/lab/bulletproof_icon_fonts.html
<% _.each(glyphs, function(glyph) { %>
.icon-<%= glyph.fileName %> {
    @include icon(<%= glyph.fileName %>);
}
<% }); %>