@font-face {
    font-family: "<%= fontName %>";
    src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
    url('<%= fontPath %><%= fontName %>.woff') format('woff'),
    url('<%= fontPath %><%= fontName %>.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.<%= className %> {
    display: inline-block;
    font-family: "<%= fontName %>";
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

.<%= className %>-lg {
    font-size: 1.3333333333333333em;
    line-height: 0.75em;
    vertical-align: -15%;
}
.<%= className %>-2x { font-size: 2em; }
.<%= className %>-3x { font-size: 3em; }
.<%= className %>-4x { font-size: 4em; }
.<%= className %>-5x { font-size: 5em; }
.<%= className %>-fw {
    width: 1.2857142857142858em;
    text-align: center;
}

.<%= className %>-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: none;
}
.<%= className %>-ul > li {
    position: relative;
}
.<%= className %>-li {
    position: absolute;
    left: -2.14285714em;
    width: 2.14285714em;
    top: 0.14285714em;
    text-align: center;
}
.<%= className %>-li.<%= className %>-lg {
    left: -1.85714286em;
}

.<%= className %>-rotate-90 {
    transform: rotate(90deg);
}
.<%= className %>-rotate-180 {
    transform: rotate(180deg);
}
.<%= className %>-rotate-270 {
    transform: rotate(270deg);
}
.<%= className %>-flip-horizontal {
    transform: scale(-1, 1);
}
.<%= className %>-flip-vertical {
    transform: scale(1, -1);
}
:root .<%= className %>-rotate-90,
:root .<%= className %>-rotate-180,
:root .<%= className %>-rotate-270,
:root .<%= className %>-flip-horizontal,
:root .<%= className %>-flip-vertical {
  filter: none;
}

<% _.each(glyphs, function(glyph) { %>.<%= className %>-<%= glyph.name %>:before { content: "\<%= glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() %>" }
<% }); %>

:root {
<% _.each(glyphs, function(glyph) { %>--icon-<%= glyph.name %>: "\<%= glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() %>";
    <% }); %>
}