// // Sass Icon Fonts // // Settings File _iconSettings.scss // Version: 0.2 // Created By: Andrew Senetar // Date: May, 19 2013 // Used: Font Awesome Styles, Foundation Icon Fonts Scss as Starting; animation from Fontello //// Compass imports used later in icons.scss @import "compass/css3/font-face"; @import "compass/css3/border-radius"; @import "compass/css3/transform"; @import "animation"; //// Font and class variables $classPrefix: "icon-"; // icon class prefix [prefix-][name] $set: "fontello"; // font name //// Color Variables (from Font Awesome) $iconBorderColor: #eee; $iconMuted: #eee; $iconLight: #fff; $iconDark: #333; //// Mixin for creation of individual icon class //// Use: @include i-class([name],[code]); (assumed to be working in the e[xxx] range) @mixin i-class($name,$pua) { .#{$classPrefix}#{$name}:before { content: "\e#{$pua}"; } } //// Mixin for creation of individual icon class for Internet Explorer //// Use: @include i-class([name],[code]); (assumed to be working in the e[xxx] range) @mixin ie-class($name,$pua) { .#{$classPrefix}#{$name} { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = "#{$pua}; "); } } //// Mixin for @font-face //// Use @include face([$set]); @mixin face($set) { @include font-face("#{$set}", font-files("#{$set}.woff", "#{$set}.ttf", "#{$set}.svg"), '#{$set}.eot', normal, normal); }