// // Pictos, by Drew Wilson - http://pictos.cc/ // Icon-font is generated by http://icomoon.co // -------------------------------------------------- @font-face { font-family: 'GhostIcons'; src:url('../fonts/icons.eot'); src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'), url('../fonts/icons.woff') format('woff'), url('../fonts/icons.ttf') format('truetype'), url('../fonts/icons.svg#icons') format('svg'); font-weight: normal; font-style: normal; } // // The Icon (before) Mixin // -------------------------------------------------- @mixin icon($char, $size: '', $color: '') { &:before { // Base font-family: "GhostIcons"; font-weight: normal; font-style: normal; vertical-align: -7%; text-transform:none; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; //Function content: '#{$char}'; @if $size != '' { font-size: $size; } @if $color != '' { color: $color; } @content; } &:hover { text-decoration:none; } } // // The Icon (after) Mixin // -------------------------------------------------- @mixin icon-after($char, $size: '', $color: '') { &:after { // Base font-family: "GhostIcons"; font-weight: normal; font-style: normal; vertical-align: -7%; text-transform:none; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; // Function content: '#{$char}'; @if $size != '' { font-size: $size; } @if $color != '' { color: $color; } @content; } &:hover { text-decoration:none; } } // // Icon Variables // -------------------------------------------------- // For accessibility, icon characters in the icon font are stored in Unicode's // Private Use Area characters. This means that screen readers won't attempt to // read them out loud. For code maintainability, we then store these Unicode // references inside Sass variables. // // Placeholder $i: \e018; // Icons $i-ghost: \e000; $i-ghost-logo: \e600; $i-chevron-down: \e001; $i-users: \e002; $i-tag: \e003; $i-tablet: \e004; $i-menu: \e005; $i-settings: \e006; $i-search: \e007; $i-search-left: \e008; $i-rss: \e009; $i-preview: \e00a; $i-app: \e00b; $i-pin: \e00c; $i-pc: \e00d; $i-pacman: \e00e; $i-edit: \e00f; $i-mobile: \e010; $i-image: \e011; $i-mail: \e012; $i-list: \e013; $i-info: \e014; $i-home: \e015; $i-grid: \e016; $i-fullscreen: \e017; $i-question: \e018; $i-external: \e019; $i-error: \e01a; $i-comments: \e01b; $i-close: \e01c; $i-chevron: \e01d; $i-chevron-left: \e11d; $i-calendar: \e01e; $i-archive: \e01f; $i-services: \e020; $i-appearance: \e021; $i-video: \e022; $i-trash: \e023; $i-reply: \e024; $i-stats: \e025; $i-featured: \e026; $i-unfeatured: \e027; $i-clock: \e028; $i-settings2: \e029; $i-camera: \e02a; $i-power: \e02b; $i-lock: \e02c; $i-content: \e02d; $i-user: \e02e; $i-support: \e02f; $i-success: \e030; $i-notification: \e031; $i-add: \e032; $i-check: \e033; $i-x: \e034; $i-link: \e035; $i-camera: \e036; $i-repost: \e037; $i-weather-rain: \e038; $i-weather-sun: \e039; $i-weather-partial: \e03a; $i-weather-snow: \e03b; $i-weather-cloudy: \e03c; $i-lightning: \e03d; $i-code: \e03e; // // Icon Class Styles // -------------------------------------------------- [class*=icon-] { &:before { // Base font-family: "GhostIcons"; font-weight: normal; font-style: normal; vertical-align: -7%; text-transform:none; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; } &:hover { text-decoration: none; } } // // Icon Classes // -------------------------------------------------- .icon-ghost:before { content: '#{$i-ghost}'; } .icon-ghost-logo:before { content: '#{$i-ghost-logo}'; } .icon-chevron-down:before { content: '#{$i-chevron-down}'; } .icon-users:before { content: '#{$i-users}'; } .icon-tag:before { content: '#{$i-tag}'; } .icon-tablet:before { content: '#{$i-tablet}'; } .icon-menu:before { content: '#{$i-menu}'; } .icon-settings:before { content: '#{$i-settings}'; } .icon-search:before { content: '#{$i-search}'; } .icon-search-left:before { content: '#{$i-search-left}'; } .icon-rss:before { content: '#{$i-rss}'; } .icon-preview:before { content: '#{$i-preview}'; } .icon-app:before { content: '#{$i-app}'; } .icon-pin:before { content: '#{$i-pin}'; } .icon-pc:before { content: '#{$i-pc}'; } .icon-pacman:before { content: '#{$i-pacman}'; } .icon-edit:before { content: '#{$i-edit}'; } .icon-mobile:before { content: '#{$i-mobile}'; } .icon-image:before { content: '#{$i-image}'; } .icon-mail:before { content: '#{$i-mail}'; } .icon-list:before { content: '#{$i-list}'; } .icon-info:before { content: '#{$i-info}'; } .icon-home:before { content: '#{$i-home}'; } .icon-grid:before { content: '#{$i-grid}'; } .icon-fullscreen:before { content: '#{$i-fullscreen}'; } .icon-question:before { content: '#{$i-question}'; } .icon-external:before { content: '#{$i-external}'; } .icon-error:before { content: '#{$i-error}'; } .icon-comments:before { content: '#{$i-comments}'; } .icon-close:before { content: '#{$i-close}'; } .icon-chevron:before { content: '#{$i-chevron}'; } .icon-chevron-left:before { content: '#{$i-chevron-left}'; } .icon-calendar:before { content: '#{$i-calendar}'; } .icon-archive:before { content: '#{$i-archive}'; } .icon-services:before { content: '#{$i-services}'; } .icon-appearance:before { content: '#{$i-appearance}'; } .icon-video:before { content: '#{$i-video}'; } .icon-trash:before { content: '#{$i-trash}'; } .icon-reply:before { content: '#{$i-reply}'; } .icon-stats:before { content: '#{$i-stats}'; } .icon-featured:before { content: '#{$i-featured}'; } .icon-unfeatured:before { content: '#{$i-unfeatured}'; } .icon-clock:before { content: '#{$i-clock}'; } .icon-settings2:before { content: '#{$i-settings2}'; } .icon-camera:before { content: '#{$i-camera}'; } .icon-power:before { content: '#{$i-power}'; } .icon-lock:before { content: '#{$i-lock}'; } .icon-content:before { content: '#{$i-content}'; } .icon-user:before { content: '#{$i-user}'; } .icon-support:before { content: '#{$i-support}'; } .icon-success:before { content: '#{$i-success}'; } .icon-notification:before { content: '#{$i-notification}'; } .icon-add:before { content: '#{$i-add}'; } .icon-check:before { content: '#{$i-check}'; } .icon-x:before { content: '#{$i-x}'; } .icon-link:before { content: '#{$i-link}'; } .icon-camera:before { content: '#{$i-camera}'; } .icon-repost:before { content: '#{$i-repost}'; } .icon-weather-rain:before { content: '#{$i-weather-rain}'; } .icon-weather-sun:before { content: '#{$i-weather-sun}'; } .icon-weather-partial:before { content: '#{$i-weather-partial}'; } .icon-weather-snow:before { content: '#{$i-weather-snow}'; } .icon-weather-cloudy:before { content: '#{$i-weather-cloudy}'; } .icon-lightning:before { content: '#{$i-lightning}'; }