54 lines
1.6 KiB
SCSS
54 lines
1.6 KiB
SCSS
// #############################################################################
|
|
// 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 %>);
|
|
}
|
|
<% }); %>
|