Ghost/core/admin/assets/sass/modules/icons.scss

/*
 * The icons used in Ghost are the Pictos set by Drew Wilson - http://pictos.css
 * They are embedded via a custom icon font built with http://icomoon.io
 *
 * Table of Contents:
 * 
 * Font Face
 * Icon Element
 * Icon Variables / Short Names
 * Usage
 */


/* =============================================================================
   The Font Face
   ============================================================================= */

/* Generated by icomoon.co */

@font-face {
	font-family: 'Icons';
	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 Element
   ============================================================================= */

/* 
 * Epic dynamic icon element by Eric Eggert, this thing is so fucking cool it's
 * actually unreal. http://cl.ly/O40t 
 */

%icon:before, 
%icon:after {
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	vertical-align: -7%;
	text-transform:none;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;

}

@mixin icon($char, $size: '', $color: '') {
    @extend %icon;

    &:before {
        content: '#{$char}';
        @if $size != '' {
            font-size: $size;
        }
        @if $color != '' {
            color: $color;
        }
        @content;
    }

    &:hover {
        text-decoration:none;
    }
}

/*
 * Special use case for when we want to add an icon after an element rather
 * than before it. For things like dropdowns.
 */

@mixin icon-after($char, $size: '', $color: '') {
    @extend %icon;

    &:after {
        content: '#{$char}';
        @if $size != '' {
            font-size: $size;
        }
        @if $color != '' {
            color: $color;
        }
        @content;
    }

    &:hover {
        text-decoration:none;
    }
}


/* =============================================================================
   Icon Variables / Short Names
   ============================================================================= */

/* 
 * 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-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-plugins: 		\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-calendar: 		\e01e;
$i-archive: 		\e01f;
$i-services: 		\e020;
$i-appearance: 		\e021;
$i-video: 			\e022;
$i-remove: 			\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;


/* =============================================================================
   Usage
   ============================================================================= 

To create a button with a label that is prefixed with a camera icon, we might
write our Sass something like this:

#button {
	display: block;
	width: 200px;
	height: 40px;
	@include icon($i-camera, 16px, #fff) {vertical-align:-10%;};
}

Thi would then output full CSS something like this:

#button {
	display: block;
	width: 200px;
	height: 40px;
}

#button:before {
	content: "\e02a";
	size: 16px;
	color: #fff;
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	vertical-align: -10%;
	text-transform:none;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

*/