Ghost/ghost/admin/app/styles/modules/icons.scss

// ------------------------------------------------------------
// Icons
//
// Defined the @font-face rule for the icon font, as well as
// the base styles for when using icons.
// Includes the mixins for adding icons directly and the
// variables for each icon.
//
// * Font-face rule
// * Base styled for icons
// * Base styled for icons
// * The Icon (before) Mixin
// * The Icon (after) Mixin
// * Icon Variables
// * Icon Class Styles
// * Icon Classes
// * Div-based Icon Classes
// ------------------------------------------------------------


//
// Font-face rule
// Icon-font is generated by http://icomoon.co
// Pictos, by Drew Wilson - http://pictos.cc/
// --------------------------------------------------

@font-face {
    font-family: 'GhostIcons';
    src:url('fonts/icons.woff?v=0.1') format('woff'); // Increment the ?v number every time the font files are regenerated
    font-weight: normal;
    font-style: normal;
}


//
// Base styled for icons
// --------------------------------------------------

%icon-base {
    font-family: "GhostIcons";
    font-weight: normal;
    font-style: normal;
    vertical-align: -3%;
    text-transform:none;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


//
// The Icon (before) Mixin
// --------------------------------------------------

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

        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 {
        @extend %icon-base;

        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.
//


$i-add:                 \f632;
$i-app:                 \f60b;
$i-appearance:          \f621;
$i-archive:             \f61f;
$i-atom:                \f63e;
$i-book:                \f642;
$i-calendar:            \f61e;
$i-camera:              \f62a;
$i-check:               \f633;
$i-chevron-down:        \f601;
$i-chevron-left:        \f643;
$i-chevron:             \f61d;
$i-clock:               \f628;
$i-close:               \f61c;
$i-code:                \f63d;
$i-comments:            \f61b;
$i-compass:             \f63f;
$i-content:             \f62d;
$i-edit:                \f60f;
$i-error:               \f61a;
$i-external:            \f619;
$i-featured:            \f626;
$i-fullscreen:          \f617;
$i-ghost-logo:          \f644;
$i-ghost:               \f600;
$i-grid:                \f616;
$i-home:                \f615;
$i-image:               \f611;
$i-info:                \f614;
$i-lightning:           \f63c;
$i-link:                \f635;
$i-list:                \f613;
$i-lock:                \f62c;
$i-mail:                \f612;
$i-markdown:            \f640;
$i-menu:                \f605;
$i-mobile:              \f610;
$i-notification:        \f631;
$i-pacman:              \f60e;
$i-pc:                  \f60d;
$i-pin:                 \f60c;
$i-power:               \f62b;
$i-preview:             \f60a;
$i-question:            \f618;
$i-reply:               \f624;
$i-repost:              \f636;
$i-rss:                 \f609;
$i-search-left:         \f608;
$i-search:              \f607;
$i-services:            \f620;
$i-settings:            \f606;
$i-settings2:           \f629;
$i-stats:               \f625;
$i-success:             \f630;
$i-support:             \f62f;
$i-tablet:              \f604;
$i-tag:                 \f603;
$i-trash:               \f623;
$i-twitter:             \f641;
$i-unfeatured:          \f627;
$i-user:                \f62e;
$i-users:               \f602;
$i-video:               \f622;
$i-weather-cloudy:      \f63b;
$i-weather-partial:     \f639;
$i-weather-rain:        \f637;
$i-weather-snow:        \f63a;
$i-weather-sun:         \f638;
$i-x:                   \f634;


//
// Icon Class Styles
// --------------------------------------------------

[class*=icon-] {
    &:before {
        @extend %icon-base;
    }

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


//
// Icon Classes
// --------------------------------------------------

.icon-add:before {
    content: '#{$i-add}';
}
.icon-app:before {
    content: '#{$i-app}';
}
.icon-appearance:before {
    content: '#{$i-appearance}';
}
.icon-archive:before {
    content: '#{$i-archive}';
}
.icon-atom:before {
    content: '#{$i-atom}';
}
.icon-book:before {
    content: '#{$i-book}';
}
.icon-calendar:before {
    content: '#{$i-calendar}';
}
.icon-camera:before {
    content: '#{$i-camera}';
}
.icon-check:before {
    content: '#{$i-check}';
}
.icon-chevron-down:before {
    content: '#{$i-chevron-down}';
}
.icon-chevron-left:before {
    content: '#{$i-chevron-left}';
}
.icon-chevron:before {
    content: '#{$i-chevron}';
}
.icon-clock:before {
    content: '#{$i-clock}';
}
.icon-close:before {
    content: '#{$i-close}';
}
.icon-code:before {
    content: '#{$i-code}';
}
.icon-comments:before {
    content: '#{$i-comments}';
}
.icon-compass:before {
    content: '#{$i-compass}';
}
.icon-content:before {
    content: '#{$i-content}';
}
.icon-edit:before {
    content: '#{$i-edit}';
}
.icon-error:before {
    content: '#{$i-error}';
}
.icon-external:before {
    content: '#{$i-external}';
}
.icon-featured:before {
    content: '#{$i-featured}';
}
.icon-fullscreen:before {
    content: '#{$i-fullscreen}';
}
.icon-ghost-logo:before {
    content: '#{$i-ghost-logo}';
}
.icon-ghost:before {
    content: '#{$i-ghost}';
}
.icon-grid:before {
    content: '#{$i-grid}';
}
.icon-home:before {
    content: '#{$i-home}';
}
.icon-image:before {
    content: '#{$i-image}';
}
.icon-info:before {
    content: '#{$i-info}';
}
.icon-lightning:before {
    content: '#{$i-lightning}';
}
.icon-link:before {
    content: '#{$i-link}';
}
.icon-list:before {
    content: '#{$i-list}';
}
.icon-lock:before {
    content: '#{$i-lock}';
}
.icon-mail:before {
    content: '#{$i-mail}';
}
.icon-markdown:before {
    content: '#{$i-markdown}';
}
.icon-menu:before {
    content: '#{$i-menu}';
}
.icon-mobile:before {
    content: '#{$i-mobile}';
}
.icon-notification:before {
    content: '#{$i-notification}';
}
.icon-pacman:before {
    content: '#{$i-pacman}';
}
.icon-pc:before {
    content: '#{$i-pc}';
}
.icon-pin:before {
    content: '#{$i-pin}';
}
.icon-power:before {
    content: '#{$i-power}';
}
.icon-preview:before {
    content: '#{$i-preview}';
}
.icon-question:before {
    content: '#{$i-question}';
}
.icon-reply:before {
    content: '#{$i-reply}';
}
.icon-repost:before {
    content: '#{$i-repost}';
}
.icon-rss:before {
    content: '#{$i-rss}';
}
.icon-search-left:before {
    content: '#{$i-search-left}';
}
.icon-search:before {
    content: '#{$i-search}';
}
.icon-services:before {
    content: '#{$i-services}';
}
.icon-settings:before {
    content: '#{$i-settings}';
}
.icon-settings2:before {
    content: '#{$i-settings2}';
}
.icon-stats:before {
    content: '#{$i-stats}';
}
.icon-success:before {
    content: '#{$i-success}';
}
.icon-support:before {
    content: '#{$i-support}';
}
.icon-tablet:before {
    content: '#{$i-tablet}';
}
.icon-tag:before {
    content: '#{$i-tag}';
}
.icon-trash:before {
    content: '#{$i-trash}';
}
.icon-twitter:before {
    content: '#{$i-twitter}';
}
.icon-unfeatured:before {
    content: '#{$i-unfeatured}';
}
.icon-user:before {
    content: '#{$i-user}';
}
.icon-users:before {
    content: '#{$i-users}';
}
.icon-video:before {
    content: '#{$i-video}';
}
.icon-weather-cloudy:before {
    content: '#{$i-weather-cloudy}';
}
.icon-weather-partial:before {
    content: '#{$i-weather-partial}';
}
.icon-weather-rain:before {
    content: '#{$i-weather-rain}';
}
.icon-weather-snow:before {
    content: '#{$i-weather-snow}';
}
.icon-weather-sun:before {
    content: '#{$i-weather-sun}';
}
.icon-x:before {
    content: '#{$i-x}';
}

// Specific icon size adjustments
.icon-list:before {
    font-size: 0.9em;
}
.icon-markdown:before {
    font-size: 1.1em;
    vertical-align: -7%;
}
.icon-twitter:before {
    font-size: 1.1em;
}


//
// Div-based Icon Classes
// --------------------------------------------------

.icon-grab:before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 15px;
    background-size: 4px 4px;
    background-color: $midbrown;
    background-position: -1px -1px;
    background-image: linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px),
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px);
}