Created
September 25, 2013 03:38
-
-
Save lukebrooker/6694910 to your computer and use it in GitHub Desktop.
This an alternative template for [json2fontcss](https://github.com/twolfson/json2fontcss). It allows the entire icon font to be styled in one loop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "i-setup"; | |
.i { | |
@include icon(false, "before", true); | |
} | |
// Automagically Set up a class name for each icon | |
@each $icon in $icons { | |
$name: nth($icon, 1); | |
/* | |
<div><i class="i i--#{$name}"></i> <code>.i--#{$name}</code></div> | |
*/ | |
.i--#{$name} { | |
@include icon($name, 'before', false); | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Icon list (corresponds to icon font characters) | |
// Declare empty list variable ready to append to | |
$icons: (); | |
$icons: append($icons, "chevron-left" "\e006", comma); | |
$icons: append($icons, "minus" "\e003", comma); | |
$icons: append($icons, "tick" "\e000", comma); | |
$icons: append($icons, "chevron-right" "\e005", comma); | |
$icons: append($icons, "chevron-down" "\e007", comma); | |
$icons: append($icons, "chevron-up" "\e004", comma); | |
$icons: append($icons, "plus" "\e002", comma); | |
$icons: append($icons, "remove" "\e001", comma); | |
$icons: append($icons, "attach" "\e008", comma); | |
@function match($haystack, $needle) { | |
@each $item in $haystack { | |
$index: index($item, $needle); | |
@if $index { | |
$return: if($index == 1, 2, $index); | |
@return nth($item, $return); | |
} | |
} | |
@return false; | |
} | |
// For adding icons to elements using CSS pseudo-elements | |
// Source: http://jaydenseric.dev/blog/fun-with-sass-and-font-icons | |
@mixin icon($icon: false, $position: 'before', $styles: false) { | |
// Either a :before or :after pseudo-element, defaulting to :before | |
&:#{$position} { | |
@if $icon { | |
// Icon has been specified | |
content: match($icons, $icon); | |
} | |
@if $styles { | |
// Suportive icon styles have been specified | |
font-family: "Red Hat Icons"; | |
speak: none; | |
font-style: normal; | |
font-weight: normal; | |
font-variant: normal; | |
text-transform: none; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
} | |
// Include any extra rules supplied for the pseudo-element | |
@content; | |
} | |
} | |
@font-face { | |
font-family: "My Icons"; | |
src:url("../fonts/my-icons/my-icons.eot"); | |
src:url("../fonts/my-icons/my-icons.eot?#iefix") format("embedded-opentype"), | |
url("../fonts/my-icons/my-icons.woff") format("woff"), | |
url("../fonts/my-icons/my-icons.ttf") format("truetype"), | |
url("../fonts/my-icons/my-icons.svg#icomoon") format("svg"); | |
font-weight: normal; | |
font-style: normal; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Icon list (corresponds to icon font characters) | |
// Declare empty list variable ready to append to | |
$icons: (); | |
{{#chars}} | |
$icons: append($icons, "{{name}}" "\{{{value}}}", comma); | |
{{/chars}} | |
@function match($haystack, $needle) { | |
@each $item in $haystack { | |
$index: index($item, $needle); | |
@if $index { | |
$return: if($index == 1, 2, $index); | |
@return nth($item, $return); | |
} | |
} | |
@return false; | |
} | |
// For adding icons to elements using CSS pseudo-elements | |
// Source: http://jaydenseric.dev/blog/fun-with-sass-and-font-icons | |
@mixin icon($icon: false, $position: 'before', $styles: false) { | |
// Either a :before or :after pseudo-element, defaulting to :before | |
&:#{$position} { | |
@if $icon { | |
// Icon has been specified | |
content: match($icons, $icon); | |
} | |
@if $styles { | |
// Suportive icon styles have been specified | |
font-family: {{{escapedFontFamily}}}; | |
speak: none; | |
font-style: normal; | |
font-weight: normal; | |
font-variant: normal; | |
text-transform: none; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
} | |
// Include any extra rules supplied for the pseudo-element | |
@content; | |
} | |
} | |
@font-face { | |
font-family: {{{escapedFontFamily}}}; | |
{{#fonts.eot}} | |
src:url("{{{fonts.eot}}}"); | |
{{/fonts.eot}} | |
src:{{#fonts.eot}}url("{{{fonts.eot}}}?#iefix") format("embedded-opentype"), | |
{{/fonts.eot}}{{#fonts.woff}}url("{{{fonts.woff}}}") format("woff"), | |
{{/fonts.woff}}{{#fonts.ttf}}url("{{{fonts.ttf}}}") format("truetype"), | |
{{/fonts.ttf}}{{#fonts.svg}}url("{{{fonts.svg}}}#icomoon") format("svg"){{/fonts.svg}}; | |
font-weight: normal; | |
font-style: normal; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment