// // Sass Icon Fonts // // Main File icons.scss // Version: 0.4 // Created By: Andrew Senetar // Date: August, 7 2013 // Used: Font Awesome Styles, Foundation Icon Fonts Scss as Starting; animation from Fontello /* Defaults */ $set: "voltaicideas"; // Colors (from Font Awesome) $iconBorderColor: #eee !default; $iconMuted: #eee !default; $iconLight: #fff !default; $iconDark: #333 !default; /* Mixins */ // Mixin for creating individual icon classes @mixin i-class($name, $pau) { .icon-#{$name}:before { content: "\e#{$pau}"; } } // Mixin to simplify font face creation @mixin face($set) { @font-face { font-family: "#{$set}"; src: url("../fonts/#{$set}"); src: url("../fonts/#{$set}.eot#iefix") format('embedded-opentype'), url("../fonts/#{$set}.woff") format('woff'), url("../fonts/#{$set}.ttf") format('truetype'), url("../fonts/#{$set}.svg#fontello") format('svg'); font-weight: normal; font-style: normal; } } @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } @include face(#{$set}); //@font-face //// global icon styles (from Foundation Icons + Font Awesome) /* Icon font Styles */ [class*='icon-'] { background-image: none; background-position: 0% 0%; background-repeat: repeat; display: inline; height: auto; width: auto; vertical-align: baseline; line-height: 1; margin-top: 0; speak: none; font-family: '#{$set}'; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: inherit; -webkit-font-smoothing: antialiased; } [class*='icon-']:before { text-decoration: inherit; display: inline-block; speak: none; } //// Icon borders (from Font Awesome) [class*="border icon-"] { border: solid 1px $iconBorderColor; padding: .2em .25em .15em; @include border-radius(3px); } //// Icon sizes (from Font Awesome) [class*="large icon-"]:before { vertical-align: -10%; font-size: 1.333em; } [class*="huge icon-"]:before { vertical-align: -17%; font-size: 1.75em; } [class*="2x icon-"] { font-size: 2em; & .border { border-width: 2px; @include border-radius(4px); } } [class*="3x icon-"] { font-size: 3em; & .border { border-width: 3px; @include border-radius(5px); } } [class*="4x icon-"] { font-size: 4em; & .border { border-width: 4px; @include border-radius(6px); } } [class*="5x icon-"] { font-size: 5em; & .border { border-width: 5px; @include border-radius(7px); } } //// Colors (from Font Awesome) [class*="muted icon-"]{ color: $iconMuted; } [class*="light icon-"]{ color: $iconLight; } [class*="dark icon-"]{ color: $iconDark; } //// Fixes //// makes sure icons active on rollover in links (from Font Awesome) a [class*="icon-"]:before { display: inline; } //// Actual Icons /* Icon Font List */ @import "_icon_codes.scss";